Vue——进阶篇

Vue之进阶篇

author：木子六日

学习视频来源于

coderwhy老师的vue教学

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 = false

new 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 = 2000

axios({
	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的一个样式库，它的官网点这儿