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: '<App/>'
  })
  

过程：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: '<App/>'
    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 使用路由：通过<router-link>和<router-view>

  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>

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

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)

5.6 router-link的其他属性补充

• to：用于指定跳转的路径

• tag：指定<router-link>渲染成什么组件，默认时<a>,

  <router-link to="/home" tag="button">首页</router-link>
  

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

  <router-link to="/home" tag="button" replace>首页</router-link>
  

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

  <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
  

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

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

6.通过代码跳转路由

<div id="app">
  <h2>我是App组件</h2>
  <button @click="homeClick">首页</button>
  <button @click="aboutClick">关于</button>
  <router-view></router-view>
</div>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      // this.$router.push('/home')
      this.$router.replace('/home')
    },
    aboutClick() {
      // this.$router.push('/about')
      this.$router.replace('/about')
    }
  }
}
</script>

6.动态路由的使用

[http://localhost:8080/user]

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

6.1 动态路由的实现

  App.vue中
 <template>
  <div id="app">
    <router-link v-bind:to="'/user/'+userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
     data() {
       return {
         userId: 'zhangsan'
       }
     },
  ｝
 </script>

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

  路由中显示已达成，如何显示到界面中
  User.vue中
  <template>
    <div>
      <h2>我是用户界面</h2>
      <p>我是用户信息，嘿嘿嘿</p>
      使用计算属性：<h2>{{userId}}</h2>
      不使用计算属性：<h2>{{$route.params.userId}}</h2>
    </div>
  </template>

  <script>
    export default {
      name: "user",
      computed: {
        //指向哪个路由，就会拿到哪个路由
        userId() {
          //userId指向的是index.js中path里的userId
          return this.$route.params.userId;
        }
      }
    }
  </script>

7.打包文件的解析

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

打包文件.png

js文件夹中：

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

五、Vuex

六、网络请求封装（axios）