使用vue-cli3搭建项目详细步骤

本文将介绍使用vue-cli3创建项目以及一些相关的配置。

手脚架vue-cli最新版本为vue-cli3,，如果电脑上安装了vue-cli2来创建vue项目的话，需要先将vue-cli2先卸载，重新安装vue-cli3。

安装vue-cli3

1、执行npm uninstall vue-cli -g命令卸载之前的旧版本

2、执行npm install @vue/cli -g命令安装最新版本

创建项目

1、vue create 项目名称

示例：vue create hell-world

注意：不能用驼峰方式命名项目名称了，它会报错的，只能全小写

2、执行（1）命令以后出现如下界面，我选择的是手动配置

3、选择需要的模块

选择的选择的是babel、Router、Vuex、Linter/Formatter、unit Testing、E2E Testing

在这里不知道为什么选这些，组长就这么写的，后续再问。

4、一系列操作，首先是路由部分，我选择了n

5、回车以后让你进行eslint配置，我选择了标准配置

6、检查设置，我选择的是保存的时候检查

7、单元测试。前端的单元测试目前有两个比较热的框架，一个是karma+mocha+chai的方式，一个是jest。我选择的是第一个，我也不懂，等公司大佬教吧

8、回车以后进入到这个配置，也不知道是什么，先听组长的命令，选择nightwatch。听说nightwatch框架，语法简洁，比较容易理解。

9、文件存放位置。我选择的是单独存放。

10、是否保存当前配置，以便下次快速创建。我选择的否

11、回车以后出现创建页面

12、大写的注意：在执行上面的时候会报错。会报关于chromedriver的错误，至于为什么会出现这个错误就不知道了。如果出现这个错误，输入npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver命令执行后，重新创建项目，完美解决。

13、稍等片刻，你将看到如下情景。此时项目创建成功，我们就迫不及待的进入到项目，执行npm run serve看一下。

至此，一个vue项目创建完成。稍后我会说明一下用cli3创建的vue项目的目录结构以及各个文件的作用，以及加上自己在开发项目的时候增添一些目录结构和项目的配置。

 

转载于:https://www.cnblogs.com/zmyxixihaha/p/10899827.html