Vue脚手架（Vue CLI）

一、什么是Vue CLI

使用Vue开发大型项目时，如果诸如代码目录结构、项目结构和部署、热加载、代码单元测试等事情，都要手动完成的话，无疑效率比较低效，所以我们通常使用一些脚手架工具来帮助完成这些事情。
CIL（Command-Line Interface）,翻译为命令行界面，俗称脚手架。使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。

二、安装脚手架 CLI

脚手架（CLI）依赖于node环境以及webpack
安装命令
```
npm install -g@vue/cli
```
如果要使用脚手架2，那么还要安装脚手架2的脚本
```
 vue init webpack my-project
```

三、创建项目

Vue CLI2初始化项目
```
  vue init webpack my-project
```

1.ESLint规范

一种代码规范，如果不符合要求，那么启动服务时会报错。新手不建议使用。可以在index.js中 useEslint: true属性选择是否使用。

2.runtime-compiler和runtime-only的区别

二者中只有main.js文件不同

runtime-compiler

new Vue({
  el: '#app',
  components: { App },
  template: ''
})

过程：template解析成ast（抽象语法树）；ast再编译成render函数；然后转为虚拟dom；最后转化为真实Dom。

runtime-only：1.性能更多高 2.代码量更少（创建项目时就可看出比上面的小6KB，建议使用）

new Vue({
 el: '#app',
  render: h => h(App)
  //箭头函数相当于下面代码
  // render: function (h) {
  //   return h(App)
  // }
})

过程：render函数转为虚拟dom；最后转化为真实Dom。

runtime-only比对runtime-compiler，减少了解析成render函数的过程。vue-template-compiler这个插件帮助了我们做了这个过程。

3.render函数

首先了解一下createElement函数

new Vue({
  el: '#app',
  // components: { App },
  // template: ''
    render: function (createElement) {
        //1.普通用法：createElement('标签', {标签的属性}, [显示内容]) 自定义内容
      return createElement('h2',
        {class: 'box'},
        ['Hello World'], createElement('button'), ['按钮'])
        //2.核心用法：传入组件对象 函数还可以传入组件对象，那么我们就可以吧app组件直接传入
        return createElement(App)
    }
  })

第二种用法就是render函数，即runtime-only中的main.js，这里是没有template的。

Vue CLI3初始化项目

1.跟Vue CLI2的区别

vue-cli3是基于webpack4打造，vue2还是webpack3；
vue-cli3的设计原则是“0配置”，移除配置文件跟目录下的build和config等目录；
vue-cli3提供了vueui命令，提供了可视化配置，更加人性化；
移除了static文件家，新增了public文件夹，并且index.html移动到public文件夹。

2.创建项目

vue create my-project

vuecli3.png

vue3项目结构.png

main.js

new Vue({
  render: h => h(App),
}).$mount('#app')

[.$mount('#app')] 等同于 [el: '#app']

3.配置去哪了

从上面的项目结构中可以看出，同脚手架2比少了配置文件，那么配置文件放在哪里了呢？

在脚手架3中，如果要修改配置，有三种方案

启动配置服务器：vue ui
在命令行输入vue ui命令即可打开一个本地服务，端口默认8000
进入后将项目导入就可以进去操作界面。
找到隐藏起来的配置
在node-modules中的@vue文件夹中

配置.png
自定义配置文件vue.config.js，添加想要的配置，会和@vue文件中的配置自动整合

四、Vue-Router（路由）

1.认识路由

路由：通过互联的网络把信息从原地址传输到目的地址的活动
生活中实例：比如路由器。
路由器提供了两种机制：路由和传送
路由：决定数据包从来源到目的的路径
传送：将输入端的数据转移到合适的输出端

2.前端渲染和后端渲染

2.1 第一阶段：后端渲染

最早期：jsp 包含html+css+java代码（从数据库中读取信息动态放在页面中），称为服务端渲染，即后端渲染。
后端路由：后端处理URL和页面之间的映射关系

2.2 第二个阶段：前后段分离 Ajax

后端只负责提供数据，不负责任何阶段的内容
浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

2.3 第三个阶段 SPA页面前端路由

在前后段分离的基础上加了前端路由
SPA:单页面富应用，整个页面只有一个html页面，一个url对应一个组件（即页面），有前端维护，所以叫前端路由
前段路由的核心：改变URL页面不进行整体的刷新（前端控制，不与后台交互）

3.如何保证改变URL页面不会刷新

3.1 通过改变hash改变url

初始页面

[图片上传中...(手动刷新.png-ddfe8f-1601871351865-0)]
刷新时发送请求信息

手动刷新.png
通过hash改变url并不会发送请求信息

通过hash修改.png

3.2 HTML5的history模式：pushState

  history.pushState({}, '', 'url')  
  history.back()        等同于 history.go(-1)     后退
  history.forward()     等同于 history.go(1)      前进

pushState.png

会将url压入栈结构中，先进后出

栈结构.jpg

3.3 HTML5的history模式：replaceState

  history.replaceState({}, '', 'home')

与pushState不同的是，replaceState是替换url，无法返回

replace.png

3.4 HTML5的history模式：go

  history.go(-2)

与pushState一起使用
back、forward、go三个接口等同于浏览器界面的前进后退

go.png

4.安装和使用Vue-router

4.1 安装(脚手架已选择的的话不用再次安装)

 npm install vue-router --save

4.2 在src文件夹下创建router文件夹，并创建index.js文件

4.3 在index中配置所有路由信息

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [

]
const router = new VueRouter({
  routes
})

//3.将router对象传入到Vue实例 导出
export default router

4.3 在mian.js中导入

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

简单配置实现，但还没有配置映射信息

5.配置映射信息

5.1 创建路由组件

在components文件夹下创建路由组件

5.2 配置映射信息：组件和路径映射关系

import home from '../components/Home.vue'
import about from '../components/About.vue'
const routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/about',
    component: about
  }
]

5.3 使用路由：通过和

  
    首页
    关于

在App.vue中配置，起到占位作用，路由指向的组件将会渲染拿到的位置。

5.4 路由的默认值

  const routes = [
    {
      path: '',
      redirect: '/home'
    },
  ]

在打开网页时，一般情况都是默认直接打开首页，这是使用redirect重定向到home，即可。

5.5 url修改为history模式

url的默认模式时hash模式：

  [http://localhost:8080/#/home](http://localhost:8080/#/home)

可以在new VueRouter中添加属性来改变

  const router = new VueRouter({
    routes,
    mode: 'history'
  })

history模式：没有# 更美观

  [http://localhost:8080/home](http://localhost:8080/home)

replace：关闭网页的前进后退功能（pushState转成replaceState）

首页

active-class:当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认名称，并给其添加style样式

关于

但是如果改变active-class的话，每个都要改变，过于麻烦，所以可以在定义路由时添加一个属性linkActiveClass

const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

6.通过代码跳转路由


  我是App组件

6.动态路由的使用

[http://localhost:8080/user]

在进入用户界面时，要求在路由上显示出当前用户的id，即例如[http://localhost:8080/user/zhangsan]的时候，我们称之为动态路由

6.1 动态路由的实现

  App.vue中
 


  index.js的routers中
  const routes = [
    {
      //此处userId会取到App.vue中v-bind:to="'/user/'+userId"的数据
      path: '/user/:userId',
      component: User
    }
  ]

  路由中显示已达成，如何显示到界面中
  User.vue中

7.打包文件的解析

vue-cli不会只打包一个js文件，而是对js文件进行分包，css文件也一样。

打包文件.png

js文件夹中：

第一个文件（app）：当前应用程序开发的所有代码（业务代码）
第二个文件：为了打包的代码做底层支撑（如导入导出等）
第三个文件（vendor提供商）：第三方，如vue、vue-router等