Vue学习之Vue CLI（脚手架）

第四章

一、vueckli-脚手架的介绍和安装

（1）、Vue CLI使用前提-NodeJS

□ 安装NodeJS（官网直接下载：http://nodejs.cn/download/或者https://www.cnblogs.com/Simple-520/p/15901020.html上篇文章查看）

□Node环境要求8.9以上或者更高版本

（2）、Vue CLI使用前提-Webpack

□ 安装Webpack（npm install webpack -g）

□Node环境要求8.9以上或者更高版本

（3）、Vue CLI使用

□ 安装Vue脚手架（npm install @vue/cli  -g），错误(如果安装失败时，尝试把C:\Users\23688\AppData\Roaming路径下的npm-cache文件夹删掉，重新安装！！！) 
□ 拉取2.x模板（npm install @vue/cli-init -g）

二、vueckli-CLI2初始化创建项目过程

（1）、Vue CLI2创建项目

□ 创建项目命令（vue init webpack vuecli2test其中vuecli2test为文件夹名称）

创建项目时出现的命令操作：
□ project name vuecli2test（项目名称）

  Project description *****（项目描述）

  Author zms（作者）
  选择：Runtime+Compiler（区别：main.js入口js中根组件中有components和template）
       Runtime-only(一般选择下面这个，区别：main.js入口js根组件中是以render：h=>h(APP)形式存在)

  install vue-router(路由)
  Usr ESLint to lint your code（js规范，y时必须按照js规范写，一般不推荐使用，即便使用了，项目搭建成功后，在config文件夹中index.js文件中到找到useEslint：true改为false就可以了）

  选择：Standard（推荐）
       Airbnb
       none
  Set up unit tests （单元测试）（y/n）n
  Setup e2e tests with Nightwatch（端到端测试）（y/n）n
 选择： YES， use NPM（用哪个管理这个项目，博主习惯了npm）
       YES， use Yarn

三、vueckli-CLI2创建项目文件夹中各个文件的介绍

四、vueckli-CLI3初始化创建项目过程

（1）、Vue CLI3创建项目

□ 创建项目命令（vue create vuecli3test其中vuecli3test为文件夹名称）

创建项目时出现的命令操作：
□ 选择defauit（默认配置）
  Manually select features（自定义配置）
当选择自定义配置时（按空格为选中）：
  Bable
  TypeScript
  Progressive Web APP(PWA)Support
  Router（路由）
  Vuex
  CSS Pre-processors（预处理器）
  Linter/Formatter（检查js规范，js规范不正确就报错，一般不推荐使用）
  Unit Testing（单元测试）
  E2E Testing（端到端测试）
选择 In dedicated config files（配置文件放到独立的文件中）
    In package.Json（把配置文件放到package，json文件中）
  Save this as a preset for future projects？（y/n）（如果y的话下次创建vue脚手架的时候会多出一个选项）
  Save preset as：coderwhy（如果上一步y的话，输入一个叫coderwhy的名字）

选择： YES， use NPM（用哪个管理这个项目，博主习惯了npm）
       YES， use Yarn

创建完成后，再配置脚手架3的话，选配置的时候如果自己创建配置方法太多，想删掉几个从C:\Users\23688中文件.vuerc删掉配置方法名字对应的配置就可以了

 启动项目和打包项目的npm命令：

npm run dev： 启动 vue-cli 开发环境的 npm命令（3.0以下?? ? 脚手架2启动方式）
npm run serve:启动 vue-cli 开发环境的 npm命令（3.0以上?? ? 脚手架3启动方式）
serve build（脚手架2，把你写好的项目打包，然后在本机测试，查看是否完整）
serve dist（脚手架3，把你写好的项目打包，然后在本机测试，查看是否完整）