03-快速建立vue脚手架

这是我学习vue的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教。

一、vue脚手架基本概念

1.1、什么是vue脚手架？

       vue脚手架 的英文名为 Vue-cli 。 CLI 是 Command-Line Interface, 翻译为命令行界面,。 Vue CLI 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置，支持热更新，有 webpack-dev-server 的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

1.2、vue脚手架的安装前提？

1.2.1、node安装下载

       vue脚手架 用于快速搭建Vue开发环境以及对应的webpack配置，webpack又依赖 node环境，所以我们当然需要安装 node。

       下载node软件并安装，下载地址 选择自己电脑相应的版本，然后点击下一步下一步安装就行。如果觉得node下载太慢了，也可以使用淘宝镜像，详情点击。

1.2.2、webpack安装

       安装命令，打开cmd并输入npm i webpack -g

二、安装Vue-cli

       这里推荐安装 Vue cli3 版本，如果想要用 Vue cli2 版本再拉取 2.x模板即可。但是我们如果先安装了Vue cli2版本，就没有办法上拉Vue cli3 版本。安装如下

2.1、安装Vue cli3 版本

打开 cmd 并输入 npm install -g @vue/cli

2.2、拉取Vue cli2 版本

在我们安装了 Vue cli3 版本 前提下，打开 cmd 并输入 npm install @vue/cli-init

三、创建Vue-cli2项目

3.1、创建项目

        1、首先找到我们要创建项目的目录，并打开cmd 输入 vue init webpack 项目名
        2、根据命令提升初始化项目，具体如下

此时，Vue-cli2就好帮我们自动创建一个文件夹，并快速搭建Vue开发环境以及对应的webpack配置。

3.2、Vue-cli2 版本项目结构讲解

        打开我们之前创建的Vue-cli2项目，我们可以看到如下目录

文件的详细作用请看下方

注意：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- assets // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等，这里的文件打包时不会被编
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.

四、创建Vue-cli3项目

4.1、创建项目

        1、首先找到我们要创建项目的目录，并打开cmd 输入 vue creat 项目名
        2、根据命令提升初始化项目，具体如下

4.2、Vue-cli3 版本项目结构讲解

4.3、如何查看修改配置文件

4.3.1、Vue UI

打开 cmd 并输入vue ui

4.3.2、找到隐藏配置

4.3.3、自定义配置：起别名（推荐）

       当我们打包的时候，vue会去比较我们自定义的配置与原配置的不同，会帮我们以我们自定义配置优先的方式打包。

4.4、vue-cli3与vue-cli2区别

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

五、运行项目

我们可以利用VS或者VW的终端，也可以利用cmd找到我们的项目文件夹，输入：

• npm run serve 运行项目
• npm run build 打包项目

这个命令并不是绝对的，而是需要根据我们的配置文件决定的，详情如下,具体了解请查阅webpack

六、创建Vue-cli项目时，我们选择Runtime-Compiler和Runtime-only的区别

        虽然在我们安装项目的时候， Runtime-Compiler 后加说明是大多数的选择，但是这里推荐使用 Runtime-only，原因是 Runtime-only 性能高，代码少。