Router
路由，负责Vue不同组件之间的跳转切换，使单页面应用具有和多页面相同的效果。
安装与导入
推荐在模块化工程中使用，安装时用NPM：
npm install vue-router
要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
基本使用
我们需要做的是：
- 将组件 (components) 映射到路由 (routes)
- 然后告诉 Vue Router 在哪里渲染它们
html：
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/Main">Go to Main</router-link>
<router-link to="/Home">Go to Home</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
js:
// 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Main from '@/views/Main.vue';
import Home from '@/views/Home.vue';
// 注册
// 导入Vue和VueRouter，调用 Vue.use(VueRouter)
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use( VueRouter );
// 创建 router 实例，然后传 `routes` 配置
let router = new VueRouter({
mode: 'history',
// 所有的路由映射，每一个路由就是一个对象
routes: [
{
// 从 path 找到 component
path: '/',
name: 'Main',
component: Main
},{
path: '/home',
name: 'Home',
component: Home
}
]
});
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
computed: {
username() {
// 获取通过路由传入的参数 `params`
return this.$route.params.username
}
},
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
this.$router指代的就是我们上面创建的router实例。
Vuex
Vuex 可以帮助我们管理共享状态，使数据信息可以在多个页面中共享。也可以全局地存储网络响应等异步资源。相当于全局变量加一组专门的控制器。
安装与导入
推荐在模块化工程中使用，安装时用NPM：
npm install vuex
要通过 Vue.use() 明确地安装Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
基本使用
声明数据
// 注册
// 导入Vue和Vuex，调用 Vue.use(Vuex)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use( Vuex );
// 构建仓库
let store = new Vuex.Store({
// 数据存储的位置，和组件的data一样，也是响应式的
state: {
// a: [1,2,3]
a: 1,
user: {
name: '名字'
}
},
})
获取数据
在组件中可使用this.$store.state取到上面state对象，获取其中的数据就像取普通对象一样。通常要在组件的计算属性中使用这个state对象：
// ...
computed: {
username() {
return this.$store.state.user.name
}
},
// ...
存储数据
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。mutation只支持同步，若要进行异步操作，要配合action使用。
- Mutation定义：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
})
参数state就代表上面的state，载荷payload可传需要的数据，也可省略payload。
- Mutation调用：
this.$store.commit('increment', {
amount: 10
})
第一个字符串参数是定义在mutations中的函数名，第二个参数可以是任何基本类型的数据。
- Action定义：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, payload) {
state.count++
}
},
actions: {
increment (store, payload) {
setTimeout(() => {
store.commit('increment', payload)
}, 1000)
}
}
})
Action是在内部调用Mutation的，这样就支持了异步操作。甚至可以在Action中执行多个Mutation。传入的第一个参数是本store实例，第二个是和Mutation同样用法的载荷。
- Action调用：
store.dispatch('increment', data)
调用也和Mutation有些类似也有些不同。
构建打包与部署
1、打包
开发过程中，用到的东西并不会在实际运行过程中都需要，比如 webpack、eslint、typescript等
打包：把项目运行过程中的资源进行整理（编译、解析……过程）
vue-cli项目创建时自带打包配置信息，使用 build 命令即可完成打包：
yarn build
# or
npm run build
直接打包的话只生成两个js文件，这两个文件的体积会特别大，影响线上响应的速度。
可改为分包按需加载（懒加载）的配置，只需要将所有的import改为以下这样的格式：
const Main = () => import('@/views/Main.vue');
const Detail = () => import('@/views/Detail.vue');
const Login = () => import('@/views/Login.vue');
const Register = () => import('@/views/Register.vue');
const User = () => import('@/views/User.vue');
const UserProfile = () => import('@/views/User/Profile.vue');
const UserCart = () => import('@/views/User/Cart.vue');
打包完成后即是多个js文件，而且按需加载。
2、部署
把代码放到各种不同的环境下运行
- 本地部署
- 测试环境部署
- 生产环境部署
无论何种环境，首先我们需要准备（搭建）一个用来提供web服务的WebServer
3、WebServer 的搭建
使用服务器工具：
- nodejs
- nginx
- apache
- iis
- ……
