vue-cli2/3 脚手架搭建项目详细 步骤解析

传统工程的问题

1. 兼容性问题
2. 使用模块化会导致js文件增加，从而导致传输文件数增加,页面加载变慢
3. 直接使用原始代码会导致文件体积过大（没有压缩）
4. 使用第三方库很不方便
   1. 搜索
   2. 下载
   3. 引用js (有些第三方库可能没有ES6模块化版本)
5. vue模板写在字符串中，没有智能提示，没有代码着色
6. 难以把样式集成到vue组件中
   开发的代码：阅读性、结构清晰
   运行的代码：体积小，能执行就行
   这些问题的本质： 开发的代码和运行的代码要求不同
   所以，需要一个工具，它能让我们舒舒服服写代码，然后通过工具转换后，得到一个最适合运行的代码。
   在vue当中，这个工具就是vue-cli
   

cli

Command-Line Interface 翻译为命令行界面， 俗称 脚手架
vue-cli 是一个官方发布的 vusjs 项目脚手架
使用 vue-cli 可以快速搭建Vue开发环境 以及对应的 webpack配置

如果在开发大型项目，必然需要使用vue-cli

使用vuejs 开发大型应用时，我们需要考虑代码目录结构、项目部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那无疑效率比较低，通常会使用一下脚手架来帮助完成这些事情。

vue-cli 安装

vue-cli是一个脚手架工具，它集成了诸多前端技术，包括但不限于：

• webpack
• babel
• eslint
• http-proxy-middleware
• typescript
• cee pre-prosessor
• css module
• …
  这些工具，大多要依赖两个东西：
• node 环境：很多工具的运行环境
• npm: 包管理器，用于下载各种第三方库
  npm和node已经集成，安装node后，会自动安装npm

安装node

安装node

安装 vue-cli

npm i -g @vue/cli

检查是否安装成功

vue -V  // --version

vue-cli 官方文档

vue-cli 官方文档

vue-cli 使用

在终端进入一个目录，在该目录下放置你的工程文件夹
在终端进入该目录

回车

vue-cli2.0版本

搭建工程

桥接工程 （使用新的vue-cli版本 搭建 2.0的脚手架 兼容处理）

npm i @vue/cli-init -g

创建项目

vue init webpack 项目名

项目配置

vue build 使用那一种方式来构建项目

runtime+compiler:  
recommeded for most users(译：建议大多数用户使用)

runtine-only: 
大约6kb的更轻的 min+gzip，但是模板<或任何特定于vue的HTML>只允许在.vue文件中- reander是需要在其他地方

优点：
打包出来更小
运行效率更高

runtime-compiler 和 runtime-only区别

eslint 代码规范约束

规范ECMAScript(js)代码

Standard 标准规范
Airbnb
none 自定义规范

Auther 作者

会默认读取全局的 git 配置用户信息
C:\Users\Administrator .gitconfig 文件

set up unit tests 单元测试

setup e2e tests with Nightwatch 端到端测试

e2e: end to end
Nightwatch 端到端测试依赖 （写代码做测试 高级测试 控制浏览器行为 无需手动测试）

准备用什么管理项目

npm
yarn
自行处理

配置示意

运行

npm run dev

vue-cli3.0版本

vue-cli3与2版本有很大区别

1. vue-cli3是基于webpack4 打造，vue-cli2 还是webpack3
2. vue-cli3的设计原则是 0配置 移除配置文件根目录下的 build和config等目录
3. vue-cli3提供了 vue ui 命令，提供了可视化配置，更加人性化
4. 移除了 static 文件夹，新增了public文件夹，并且index.html 移动到public

vue ui 可视化配置 创建项目

vue ui

vue ui

vue create

会默认创建 .git 本地仓库

搭建工程 安装

项目名：英文数字短横杠

vue create 项目名

选择配置 preset（配置）

默认配置 vue2版本 包括babel eslint
默认配置 vue3版本 预览 包括babel eslint
自定义选择配置

自定义选择配置

空格选中取消

Choose Vue version 选择Vue版本 
Babel 
TypeScript
Progressive Web App (PWA) Support 先进的（包含推送）
Router
Vuex
CSS Pre-processors  css  预处理器
Linter/Formatter  => eslint  代码验证
Unit Testing  单元测试
E2E Testing  端到端测试

如果选中Choose Vue version

配置保存的地方

引用的第三方库
是生成单独的配置文件还是
还是保存到package.json 里面

In dedicated config files  生成单独的配置文件
In package.json  保存到package.json

是否保留当前使用的配置 N

如果保存了 在创建项目的时候可以选择改配置

删除保存的配置

在用户目录的 C:\Users\Administrator\ .vuerc 文件

{
  "useTaobaoRegistry": false,
  "latestVersion": "4.5.4",
  "lastChecked": 1598232952083,
  "presets": {
    "cspreset": {  // 删除即可
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {}
      }
    }
  }
}

目录结构

运行