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
单页面如下：
<template>
<div id="app">
<!-- router-link类似于a标签(默认渲染) -->
<!--
to属性：写路由地址,可以写对象，里面加参数，例如这里的profile；
tag属性：渲染为其他标签；
replace属性：禁用后退前进功能，没有值，直接加上即可；
active-class属性：改标签处于活跃状态时（如被点击），即可为该标签添加一个类，属性值即为类名
-->
<router-link to="/test1" tag="button" active-class="active">测试1</router-link>
   
<router-link to="/test2" replace active-class="active">测试2</router-link>
<!-- id动态获取，实现动态路由 -->
<router-link :to="'/test3/'+id" replace active-class="active">测试3</router-link>
<router-link :to="{path:'/profile',query:{height:170,weight:65}}">档案</router-link>
<!-- router-view占位，点击router-link后替换为响应的组件 -->
<!-- 用keep-alive包裹可使得组件不会被重复创建销毁 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name:'App',
data(){
return {
id:'ljj'
}
}
}
</script>
<style scoped>
.active {
color: #0086B3;
}
</style>
三个组件如下：
test1
<template>
<h2>我是测试1</h2>
</template>
<script>
export default {
name:'test1'
}
</script>
<style>
</style>
test2
<template>
<div>
<h2>我是测试2</h2>
<router-link to="/test2/news">新闻</router-link>
<router-link to="/test2/sports">体育</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'test2'
}
</script>
<style>
</style>
test3
<template>
<h2>测试三{{id}}</h2>
</template>
<script>
export default {
name:'test3',
data(){
return {
//获取动态路由路径，此处的.id与index.js中路由的设置对应
id:this.$route.params.id
}
}
}
</script>
<style>
</style>
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: {}
}
}
})
组件调用这些状态的方法如下：
<template>
<div id="app">
<h2>{{$store.state.counter}}</h2>
<button @click="add()">+</button>
<button @click="minus()">-</button>
<button @click="addCount(5)">+5</button>
</div>
</template>
<script>
export default {
name:'App',
methods:{
add(){
//通过这种办法修改state的数据（必须经过mutations中定义的方法）
this.$store.commit('increment')
//调用actions方法时这样来使用
this.$store.dispatch('aIncrement')
},
minus(){
this.$store.commit('decrement')
},
addCount(count){
this.$store.commit('incrementCount',count)
}
}
}
</script>
<style scoped>
#app {
display: flex;
flex: 1;
}
</style>
我们可以在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的一个样式库，它的官网点这儿
扫一扫
1547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
