本文共 5218 字，大约阅读时间需要 17 分钟。

Vue之进阶篇

author：木子六日

学习视频来源于

1.环境

• node得先装好；
• 改镜像：npm config set registry http://registry.npm.taobao.org;
• 安装webpack：npm install webpack -g;
• 安装脚手架：npm install vue-cli -g,加了-g就是全局安装；
• 创建项目：vue create 项目名（这个是cli3或4的语法，2不是这个语法），根据一系列提示选择插件即可，一般router和vuex还有babel都会要，ESLint不要，语法太严格，很恶心；
• 我们可以在终端中输入vue ui使用可视化页面管理项目，热部署，调试方便；
• 开发完成后：npm run build,将打包出来的dist文件夹上传至服务器即可；

2.Router

为了开发SPA，router是必不可少的。单页面的情况下就由前端来做页面的路由，注意在创建项目的时候一定要选择安装router插件；

在项目的src下会有一个router的文件夹，里面有一个index.js,就在此处进行路由配置，具体使用如下：

import Vue from 'vue'import VueRouter from 'vue-router'import Test1 from '../views/test1.vue'import Test2 from '../views/test2.vue'Vue.use(VueRouter)	//此处注册路由  const routes = [	{   		path: '/',		redirect: '/test1'	},  {       path: '/test1',    component: Test1  },  {       path: '/test2',    component: Test2,	//子路由写法	children:[		{   			path: '',			redirect: 'news'		},		{   			path: 'news',			component: () => import('../components/Test2News.vue')		},		{   			path: 'sports',			component: () => import('../components/Test2Sports.vue')		}	]  },  {   	  //动态路由    path: '/test3/:id',	//路由懒加载，这种写法就是懒加载的写法，使得这个路由组件只有在被使用到时才会加载（这个组件会被单独打包为一个js）    component: () => import('../views/test3.vue')  },  {   	  path: '/profile',	  component: () => import('../components/Profile.vue')  }]const router = new VueRouter({     routes,  //不加mode的话，默认使用hash改变路由表，这样的话url间会出现#，将mode设置为history即可解决这个问题  mode:'history'})export default router

单页面如下：

三个组件如下：

test1

test2

test3

3.Vuex

vuex是为了集中管理一些vue的状态，简单来说我的理解就是一个公有变量池，方便各个组件之间使用这些公共资源，注意创建项目的时候要安装vuex插件；

在目录src下有文件夹store，里面有一个index.js，在里面配置Vuex相关，例子如下：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({   	//定义一些公共的变量  state: {   	  counter: 0  },  //修改state中的值,注意其中的方法必须是同步的  mutations: {   	  increment(state){   		  state.counter++	  },	  decrement(state){   		  state.counter--	  },	  incrementCount(state,count){   		  state.counter += count	  }  },  //actions里面是进行异步操作的方法，等于是在mutations里的方法外面又套了一层  actions: {   	  aIncrement(context){   		  setTimeout(() => {   			  context.commit('increment')		  },1000)	  }  },  //modules里面可以放很多的state  modules: {   	  a: {   		  state:{   },		  mutations:{   },		  actions: {   }	  }  }})

组件调用这些状态的方法如下：

我们可以在Chrome浏览器上安装插件vue-dev-tools来追踪这些状态。

4.axios

vue官方推荐的ajax库是axios。

因为本身有了vue就不需要用jQuery了，而且vue也只有一万多行，jQuery也有一万多行，单单为了一个ajax不值得；原生的ajax就更不可能用了，写起来太烦了，axios比较小巧，上手也比较简单，所以就用这个了。

进入项目目录，终端输入npm install axios --save,局部安装，如果目录node_modules里面有了axios的话就说明安装成功了，node_modules里面全是项目依赖的库。

简单实用如下：

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'Vue.config.productionTip = falsenew Vue({     router,  store,  render: h => h(App)}).$mount('#app')//axios的使用方法axios({   	url: 'http://123.207.32.32:8000/home/multidata'}).then(res => {   	console.log(res)})//如果有参数的话axios({   	url: 'http://123.207.32.32:8000/home/data',	//如果是post请求的话，将params改为data	params: {   		type: 'pop',		page: 3	}}).then(res => {   	console.log(res)})//如果有并发请求axios.all([axios({   	url: 'http://123.207.32.32:8000/home/multidata'}),axios({   	url: 'http://123.207.32.32:8000/home/data',	params: {   		type: 'pop',		page: 1	}})]).then(results => {   	console.log(results)})//axios的全局配置axios.defaults.baseURL = 'http://123.207.32.32:8000'axios.defaults.timeout = 2000axios({   	url: '/home/multidata'}).then(res => {   	console.log(res)})//以上所有都是使用的全局的axios，但是一般我们都会用一个自己创建的实例const instance = axios.create({   	baseURL: 'http://123.207.32.32:8000',	timeout: 2000})instance({   	url:'/home/multidata'}).then(res => {   	console.log(res)})//试用一下封装好的axios模块import {   request} from './network/request.js'request({   	url:'/home/multidata'}).then(res => {   	console.log('######################')	console.log(res)})

我们一般都会自己封装一下，方便后期维护：

//我们一般都会对axios进行一下封装，以后方便代码维护import axios from 'axios'export function request(config){   	//Promise是ES6用于处理异步的一个模块	// return new Promise((resolve,reject) => {   	// 	//1.创建axios的实例	// 	const instance = axios.create({   	// 		baseURL: 'http://123.207.32.32:8000'	// 	})			// 	//2.发送网络请求	// 	instance(config)	// 	.then(res => {   	// 		resolve(res)	// 	})	// 	.catch(err => {   	// 		reject(err)	// 	})	// })		//由于axios实例本身就是继承了Promise，外部调用时可直接使用then或catch，所以上述步骤的Promise可省略		//1.创建axios实例	const instance = axios.create({   		baseURL: 'http://123.207.32.32:8000'	})		//2.axios的拦截器：可用于拦截请求或响应	//2.1 请求的拦截器，参数是两个函数，拦截成功的函数和拦截失败的函数	instance.interceptors.request.use(a => {   		console.log('请求拦截')		//注意一定要放行请求，不然服务器收不到		return a	},b => {   		console.log(b)	})		//2.2 响应的拦截器，使用同请求的拦截	instance.interceptors.response.use(a => {   		console.log('响应拦截')		//注意一定要放行响应		return a	},b => {   		console.log(b)	})		//3.发送网络请求	return instance(config)}

5.其他

• 因为用cli比较方便，所以没有具体介绍webpack，也可以只用webpack建项目，然后自己安装loader和plugin，但是配置起来比较麻烦；
• Element ui是很契合vue的一个样式库，

转载地址：http://izee.baihongyu.com/