一、什么是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
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) 前进
会将url压入栈结构中，先进后出
3.3 HTML5的history模式：replaceState
history.replaceState({}, '', 'home')
与pushState不同的是，replaceState是替换url，无法返回
3.4 HTML5的history模式：go
history.go(-2)
与pushState一起使用
back、forward、go三个接口等同于浏览器界面的前进后退
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文件也一样。
js文件夹中：
- 第一个文件（app）：当前应用程序开发的所有代码（业务代码）
- 第二个文件：为了打包的代码做底层支撑（如导入导出等）
- 第三个文件（vendor提供商）：第三方，如vue、vue-router等
