跟着项目学Vue.js(二) 脚手架

项目初始化要求：

                  1)路由格式为history

                  2)CSS 预处理使用less

                  3)ui自动化测试使用NightWatch

                  4)语法规则和代码风格的检查工具使用eslint+airbnb

下面开始尝试用官方提供的脚手架创建示例项目。

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

环境 windows+nodejs+npm+yarn

1、安装脚手架 vue-cli 3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

     查看脚手架版本

vue --version
3.0.1

2、用脚手架创建第一个Vue项目

1)通过 vue ui 命令以图形化界面创建和管理项目

D:\VueProject>vue ui

2)打开浏览器，输入http://localhost:8000，进入Vue项目管理器，选择创建，确认项目路径没有问题后，点击【在此创建项目】按钮

3)进入创建新项目页，选择详情。填写项目文件夹文本框，选择包管理器，这里选yarn。。。不选npm，主要是因为npm的的网络问题导致其需要更多的配置，当前版本的脚手架默认就是yarn。

 

4)切到预设，选择手动，以便我们按照项目要求进行灵活设置。

5)切到功能,打开Router、Vuex、Css Pre、Linter/Formatter这四个开关。

6)点击下一步，切到配置

Router:选择hisory模式

Css Pre:选择less

Linter/Formatter:选择ESLint+Airbnb

E2E Testing:选择NightWatch

至此，该项目的初始化要求已经设置完毕

7)点击【创建项目】按钮，弹出保存为新预设选项，填写预设名【ProjectStandard】,然后点击【保存预设并创建项目】按钮，保存生成可复用的 preset。我们后面的真实项目仍会复用该配置创建项目。

8)创建完成后，点击任务，进入serve页，点击【运行】按钮

 

9)切到输出，查看启动过程，启动成功后，提示App运行在8080端口

10)打开浏览器，输入地址，查看启动效果

如果创建过程中，提示安装chromedriver时连接 216.58.220.208:443超时，导致后面的步骤无法进行，最终安装失败。

解决办法：给yarn设置chromedriver源，设置成淘宝链接

yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver"

npm安装的话同理 ，把yarn换成npm

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

方案二：

cmd中运行以下命令来创建一个新项目：

vue create project-name

通过设置命令行中的选项初始化项目。

这种方式在Vue CLI 3官方网站有详细的步骤，这里就不再重复造轮子了。

地址：https://cli.vuejs.org/zh/guide/creating-a-project.html