13. Vue CLI脚手架 (2)

如果打开github很慢, 可以试用github加速器打开

https://toolwa.com/github/ 第二步: 下载之后的压缩包为webpack-版本号.zip，我们解压之后，需要更改目录名为webpack

然后在用户目录下创建一个文件夹: .vue-templates, 注意ve-templates前面的点(.)
我们再进行vue init webpack vuedemo命令的时候，需要带上参数--offline表示离线初始化

vue init webpack vuecli2 --offline

然后会提示有很多选项, 根据需要选择.

第三步: 然后运行命令启动项目即可. npm run dev

看到下面的页面就成功了

四. vue脚手架安装时的含义及项目结构 1. vue脚手架安装时各项的含义

我们安装vue-cli脚手架的时候会有很选项, 那这些选项应该如何选择呢?如果我们知道他们是什么含义,就知道该怎么选择了.下面就来说说每一项是什么含义

1. Project name: 输入项目的名称 2. Project description: 项目描述 3. Author: 作者姓名,邮箱. 这里是来源于我们设置的全局的git用户名和邮箱 4. Vue build: 构建方式. 构建方式有两种,如下所示:

runtime + compiler: 推荐大多数用户选择这种方式

vue脚手架安装时的含义: 这个比runtime+compiler的方式更轻量, 但是只允许在.vue结尾的文件中使用模板

初步看来, 好像我们开发环境应该选择runtime+compiler, 生产环境使用Runtime-only更合适. 那具体如何呢? 后面我们来验证一下:

在template这行最后面多了一个逗号, 系统编译出错

5. Install vue-router: 是否安装vue-router

这里我选择的否, 因为刚开始用不到, 用到的时候, 我再加上

6. Use ESLint to lint your code: 是否对你的代码使用ESLint规范

这个含义是: 如果我们对代码使用了es规范, 那么如果不符合规范,在编译的时候就会报错. 这里可以选择, 也可以不选择, 刚开始学习,我们可以先不使用.
用和不用的效果:当代码中有不规范的内容时,就会报错. 比如在行尾加;

手动开启|关闭ESlint

修改index.js总配置文件, 修改参数useEslint来控制是否开启Eslint代码校验

useEslint: true, 7. Pick on ESLint preset: 选择使用eslint的标准

也就是格式化代码的标准. 有三种选择, 通常我们都选择Standard

8. Set up unit tests: 是否使用单元测试

刚开始我们不需要单元测试, 所以选择no

9. Setup e2e tests with Nightwatch: 是否设置端到端测试?

我们刚开始也不需要, 所以设置为no

10. Should we run npm install for you: 使用什么命令. 有三种选择

通常我们选择第一种npm