Vue项目从构建到启动都经历了什么过程在vue日趋流行的情况下,自己知道如何简单的构建和启动一个vue项目,但是其中的一些原理在理还是要记录一下的.

1. 构建项目

vue-lic

以前我们新建一个小demo可能是直接引用vue.js文件,甚至是直接script链接一个vue.js文件,但是这仅适用于快速测试一些vue代码而已,真正要构建一个项目的时候,我们就需要使用vue-cli来帮我们构建一个可配置的基础项目. 经常成为此为"脚手架",官方说是Vue.js开发的标准工具. 部分内容引用于官方地址

vue-cli的好处

功能丰富: 对Babel,TS,ESLint,PostCSS,PWA,单元测试和End-to-end测试提供开箱即用的支持
易于扩展: 它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案
无需Eject: Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。
CLI之上的图形化界面: 通过配套的图形化界面创建、开发和管理你的项目。
即刻创建原型: 用单个 Vue 文件即刻实践新的灵感。
面向未来: 为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

以上为看不懂的,以下才是人话:

是一个vue.js标准化工具,确保各种构建工具合理的平稳衔接,只需要写代码,不需要考虑其他配置.
将.vue文件编译成.js文件供浏览器编译.
浏览器兼容性上,默认会将ES6语法转为ES5法.
合理的对jpg,png,font等静态资源的处理
保存后,可以热更新(默认可配置)
总结来说就是: 目录结构/本地测试/代码部署/热加载/段元测试

2. 了解基础项目结构

├─build                 // 保存一些webpack的初始化配置,项目构建(3.x及以上目录中无此项)
│ ├─build.js            // 生产环境构建
│ ├─check-version.js    // 检查npm、node版本
│ ├─vue-loader.conf.js  // webpack loader配置
│ ├─webpack.base.conf.js// webpack基础配置
│ ├─webpack.dev.conf.js // 开发环境配置，构建本地开发服务器
│ ├─webpack.prod.conf.js// 生产环境的配置
│
├─config                // config文件夹保存一些项目初始化的配置(3.x及以上目录中无此项)
│ ├─dev.env.js          // 开发环境的配置
│ ├─index.js            // 项目一些配置变量
│ ├─prod.env.js         // 生产环境的配置
│
├─dist                  // 打包后的项目(npm run build后生成)
├─node_modules          // 依赖包
│
├─src                   // 源码目录
│ ├─assets              // 静态文件目录
│ ├─components          // 组件文件
│ ├─router              // 路由
│ ├─App.vue             // 是项目入口文件
│ ├─main.js             // 是项目的核心文件，入口
├─static                // 静态资源目录 (3.x及以上目录中无此项)
├─.babelrc              // Babel的配置文件
├─.editorconfig         // 代码规范配置文件
├─.gitignore            // git忽略配置文件
├─.postcssrc.js         // postcss插件配置文件
├─index.html            // 页面入口文件
├─package-lock.json     // 项目包管控文件
├─package.json          // 项目配置
└─README.md             // 项目说明书

vue-cli2.x和3.x区别

主要区别: 安装与项目构建(官方)/目录变化/项目配置变化

1. cli包名不同
```
// cli2.x
npm install -g vue-cli

// cli3.x及以上
// 如果安装了2.x 先卸载2.x再安装3.x及以上
npm insatll -g @vue/cli
```
2. 项目构建启动不同
- cli2.x
```
vue init <template-name> <project-name>
npm i
npm reun dev
```
- cli3.x
```
// 安装新增了TS的配置选项
// 新增图形化安装方法
// 保留了2.x之前的安装方法

vue create hello-world
npm i 
npm run serve
// 使用vue ui创建新项目(3.x新增)
vue ui
// 使用2.x创建
npm install -g @vue/cli-init
// 'vue init' 的运行效果与'vue-cli@2.x'相同
vue init webpack projectname
```
3. 目录不同

1- 删除cli2.x config目录,使用.env文件代替(模式)
- cli2.x config目录:主要存一些项目初始化的配置
  - dev.env.js 文件,用于开发环境的配置
  - index.js 文件,用于项目一些配置变量+
  - prod.env.js 文件,生产环境的配置
- cli3新增模式概念,每个模式都有对应的配置文件,项目启动时,对应的文件就会加载,与环境变量不同,一个模式可以包含多个环境变量.
  - vue cli项目默认有三种模式
    1. development(开发) 模式,用于vue-cli-servive serve
    2. production(生产) 模式,用于vue-cli-service build 和 vue-cli-service test:e2e
    3. test 模式,用于vue-cli-service test:unit
  - 模式需要在启动项目时使用 --mode指定
```
// 模式包含多个环境变量
NODE_ENV=development npm run serve --mode mymode
```
  - 每个模式有多个环境变量,cli3.x为模式与环境变量指定了一个.env配置文件
    
    1- .env 所有环境
    
    2- .env.mode mode模式加载的配置文件,优先级高于.env
    
    3- .eve.mode.development mode模式下,development环境所加载的配置文件,优先级最高
    
    4- 以上.env文件都是用来代替cli2.x中的config目录的
    
    5- 以VUE_APP_开头的变量可以在代码中通过process.env访问,其他的变量不可访问
    
    6- process.env始终包含两个特殊变量,NODE_ENV和BASE_URL
    
    7- 可以只指定NODE_ENV,不设置任何模式,就能按照cli2.x方法配置参数
  2- 删除cli2.x的static目录,新增public目录
  - cli2.x static目录:
    - 主要存放静态资源文件,和assets功能类似,assets文件夹下的静态文件会通过webpack打包压缩然后进入dist文件夹,而static目录下的静态文件不压缩直接进入dist文件夹.
  - cli3.x 删除static目录,将静态资源转移到public目录中,可通过/xx.xx直接访问
    - index.html 页面入口文件从根目录转移到public下,并拥有三个特殊插值
      1. <%= VALUE %> 用来做不转译插值
      2. <%- VALUE %> 用来做HTML转译插值
      3. <% expression %> 用来描述JS流程控制
    - 静态资源被转移到public目录
    - cli3.x的静态资源有两种处理方式
      1. 在JS或template/css(vue)中通过相对路径导入.这些资源会被webpack处理如assets文件夹中的静态资源
      2. pulic目录下或者使绝对路径导入的静态资源,会被直接拷贝,不经过webpack处理 3- 删除cli2.x的build目录(具体见项目配置的不同)
4. 项目配置不同

cli2.x版本的项目配置是在config和build中完成的,但是到了cli3.x版本,这两个目录都被删除了,如果需要自定义配置,需要自己新建vue.config.js文件
- publicPath - 部署应用包时的基本URL, 即webpack的output.publicPath - vue项目中其他地方会用到publicPath,不要去修改output.publicPath - publicPath是用来取代baseUrl的,baseUrl3.3以后要弃用
- outputDir - build构建的文件存放的目录 - 可以修改outPutDir不能修改publicPath
- assetsDir 编译后,在outputDir目录中存放静态资源的目录
- lintOnSave 配置eslint后, 是否每次保存lint代码, 默认启动
- runtimeCompiler 是否使用包含运行时编译器的Vue构建版本, 默认不启动
- configuerWebpack & chainWebpack - 这两个选项是用来配置webpack内容的,前者是合并对象 ,后者是链式调用 - cli3.6 webpack的build 代码压缩默认不开启,需要设置环境变量为production才会开启
- devSever 支持所有webpack-dev-server选项 - 配置项目端口号,域名host,port,https - 配置项目跨域代理 proxy
5. cli3.x新增功能特性

1. 快速原型开发
- 在cli3.x中,可以使用vue serve和vue build命令对单个vue文件进行快速原型开发
- vue serve的缺点就是需要安装全局依赖,所以在不同的机器上的一致性不能保证,只适用于快速原型开发
- 步骤:
  - 1. 安装全局依赖
```
npm install -g @vue/cli-service
```
  - 1. 单个文件
```
<template>
    <h1>hello world</h1>
</template>
```
  - 1. vue serve 运行文件
  - 1. vue build 编译文件
2. 图形化界面 vue cli3 新增UI图形化管理页面,功能如下
- 1.创建新建项目
```
// 启动图形化界面
vue ui 
```
- 1. 创建项目名称/管理工具等
- 1. 可选择默认/自定义设置/从远程仓库拉取
- 1. 管理原有项目(包括2.x版本的项目)
  - 插件管理(更新/查看)(3.x)
  - 依赖(node_modules)管理(删除/安装/更新/查看)(2.x及以上)
  - 项目配置修改(3.x)
  - 项目任务(项目script命令启动/停止操作)(2.x及以上) 3. cli插件
- 什么是插件
  - vue cli3.x使用了一套基于插件的架构,cli的相关依赖都是以@vue/cli-plugin-开头的
  - 插件可以修改内部的webpack配置,也可以想vue-cli-service注入命里
  - 在项目创建的过程中列出的特性,绝大部分是通过插件来实现的
- 插件的安装 vue add
  - 比如安装eslint
```
vue add @vue/cli-plugin-eslint
// 或者
vue add eslint
// 或者 
vue add @vue/eslint
```
  - vue-router和vuex(无对应插件,但可以同上添加)
  - vue invoke调用生成器(可调过安装过程,直接调用插件)
```
vue invoke 插件名
```
- 本地插件读取
  - 如果只需要在项目中直接访问插件API,不需要创建完整的插件,可以使用vuePlugin.service配置
```
{
    "vuePlugins":{
        "service": ["my-commands.js"]
    }
}
// 或者vuePlugin.ui添加为UI插件
{
    "vuePlugins":{
        "ui": ["my-ui.js"]
    }
}
```
4. 预设配置
- 什么是预设配置
  - 一个包含创新项目时,所需要的预定义选项和插件的JSON对象,只要在创建项目时,选中个对象文件,就能安装JSON文件内容中常见的项目,实现快速定义创建项目
  - 预设卑职包括插件生成器配置和集成工具的配置等待,这些配置会根据useConfigFiles合并到package.json或相应的配置文件中,如:当"useConfigFiles": true 时,configs的值将会被合并到vue.config.js中
- 预设配置插件的版本管理
  - 预设配置中的插件可以显示的指定版本范围,如果没有值,使用registry中最新版本(官方推荐指定)
- 允许插件的命令提示
  - 每个插件在项目创建的过程中,都可以注入它自己的命令提示,不过当你使用了预设配置,这些命令提示就会被跳过,如果需要展示命令提示,则需要设置"prompts": true即可.
- 预设配置的使用
  - 同时加载多个预设配置,选择使用
    
    vue create过程中保存的于是配置,默认存放在~/.vuerc 将预设配置写在vuerc的'presets'属性中可以再创建项目时,可以显示多个预设配置.直接选择需要的创建项目即可.
- 在vue create命令中使用 --preset指定预设配置
  
  这种形式只能加载json形式的文件,有两种形式: 本地预设和远程预设
  - 本地预设
    
    如果--preset选项的值是一个相对或绝对文件路径,或是以.json结尾,则加载本地预设,否则加载远程预设
```
// ./my-preset 应当是一个包含preset.json的文件夹
vue create --preset ./my-preset my-project

// 或者,直接使用当前工作目录下的json文件:
vue create --preset my-preset.json my-project
```
  - 远程预设
    - 发布预设配置
    - 拉取配置
    - GitLab和BitBucket也是支持的,如果要从私有repo获取,要确保使用--clone选项

3. 启动项目

vue项目启动的2中方式

1. npm run dev(默认cli2.x)

在cli2.x版本的项目,默认启动是npm run dev,可在package.json中看到,运行的是 node buidl/dev-server.js文件

2. npm run serve(默认cli3.x以上)

在cli3.x版本的项目,默认启动是npm run serve,可在package.json中看到,实际运行的是vue-cli-service serve;如果仍然想用npm run dev,可以在package.json中进行修改.

4. 项目编译

当我们运行 npm run dev/serve之后,项目就开始启动.

在当前目录中找package.json文件,查询项目的名称/版本/依赖等相关信息
vue加载webpack的打包配置文件,build/webpack.base.conf.js或者vue.config.js并启动webpack-dev-server或者vue-cli-service serve
加载config文件夹中的配置文件或者vue.config.js文件的配置内容,包含服务器host和port及入口文件文件的相关配置.
执行index.html文件,提供一个div标签用于vue的挂载
执行main.js文件
main.js文件开始挂载app.vue,使用app.vue的template替换index.html中div的内容
main.js中注入了路由,将对应的组件渲染到router-view中
router-view中加载Layout文件
Layout加载Navbar,Sidebar,AppMain等组件

说道项目编译不得不说一下vue的生命周期及其执行过程

创建vue实例, new Vue()
在创建Vue实例的时候, 执行了init(),在初始化过程中首先调用了beforeCreate钩子函数
监听data数据,初始化vue内部事件, 进行属性和方法的计算
以上完成后,调用Created钩子函数,一般数据请求(axios)会在这个周期内进行
模板编译. 会把data对象中的数据和vue语法写的模板编译成HTML,这个过程中有三种情况:
- 实例内部有template属性,直接调用,然后调用render函数去渲染
- 没有template属性,调用外部html
- 如果以上都没有就会抛出错误
编译完成,调用beforeMount钩子函数
render函数执行之后,将渲染出来的内容挂载到DOM节点上
挂载结束,调用Mounted钩子函数
当数据发生变化, 调用beforeUpate钩子函数,开始更新virtual Dom(虚拟dom)
更新完成, 调用Updated钩子函数
beforeDestory 销毁所有观察者/组件/事件监听
Destoryed实例销毁

5. 项目打包

项目测试完之后就要打包上线了,我们会执行npm run build命令,生成dist包,然后部署到服务器上.

npm run build执行的是package.json中的scripts下的"build"指令部分参考地址

vue2.x/vue3.x项目构建,项目结构解析,运行过程总结

1. 构建项目

vue-lic

vue-cli的好处

2. 了解基础项目结构

vue-cli2.x目录结构

vue-cli2.x和3.x区别

1. cli包名不同

2. 项目构建启动不同

cli2.x

cli3.x

3. 目录不同

4. 项目配置不同

5. cli3.x新增功能特性