这篇文章主要描述,你如何快速创建一个工程化的vue项目。

使用vue-cli,会非常容易及快速的构件一个工程化的Vue项目。我主要依赖的就是vue-cli的官方网站https://cli.vuejs.org/zh/guide/

基础部分

通过以下三部我们就可以快速搭建一个vue.js工程项目

第一步,是要安装vue-cli.

安装vue-cli之前,需要node.js.而且要求版本在8.9以上。这里直接进入vue-cli的安装。

安装命令为:

npm install -g @vue/cli

验证是否安装成功的命令:可以直接输入你熟知的命令,或者输入命令验证vue版本,如下

vue --version

如果安装成功,则会显示vue的版本号。比如 3.4.0.

第二步,创建一个工程

创建工程的命令,很简单,就一行:

vue create project-name

然后就会蹦出下面的提示,让你配置你的项目。

使用vue-cli快速创建一个工程化的vue项目

当你选择默认设置时,这样你只需要等待系统帮你自动创建好这个项目。

 

使用vue-cli快速创建一个工程化的vue项目

 

第三部,运行这个项目 

正如创建项目成功后提示的两条命令,一般情形,运行项目只需要运行这两条

cd hello-march

npm install //optional,根据是否已经安装了依赖

npm run serve

扩展部分

安装插件:vue-router

vue add router //这里问是否使用history mode,由于目前没有后端配置,选择了no

//安装之后提示有问题,没有安装依赖,根据提示的代码,将router的依赖安装即可

npm install --save vue-router

//安装成功之后,则会提醒更新后的文件夹状态:

✔  Successfully invoked generator for plugin: core:router
   The following files have been updated / added:

     src/router.js
     src/views/About.vue
     src/views/Home.vue
     package-lock.json
     package.json
     src/App.vue
     src/main.js

一些可能的报错处理

在最开始创建项目时遇到了一些问题,关键是根据报错信息日志,确定自己的报错是什么导致的。

使用vue-cli快速创建一个工程化的vue项目

使用vue-cli快速创建一个工程化的vue项目 

相关文章:

  • 2021-11-12
  • 2021-05-13
  • 2021-05-01
  • 2021-04-01
  • 2021-08-01
  • 2021-12-06
猜你喜欢
  • 2021-04-11
  • 2022-01-18
  • 2021-12-20
  • 2021-07-06
  • 2021-05-12
  • 2021-04-25
  • 2022-01-11
相关资源
相似解决方案