路由(router)
安装
npm install vue-router
引用
在view目录中创建两个vue页面用来测试，view/test1.vue和view/test2.vue。
在src创建目录router，并创建文件index.js，文件内容如下：
import Vue from 'vue'
import Router from 'vue-router'
import test1 from '../view/test1.vue'
import test2 from '../view/test2.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/test1',
name: 'test1',
component: test1
},{
path:'/test2',
name:'test2',
component: test2
}
],
mode: "history"//干掉地址栏里边的#号键
})
其中关键点是import Router from 'vue-router'和Vue.use(Router)。
在main.js中再把router/index.js引入进来
...
import router from './router/index.js'
...
new Vue({
el: '#app',
router,
render: h => h(App)
})
使用
在App.vue文件中添加router-view作为显示路由页面的容器节点。
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 展示router -->
<router-view></router-view>
</div>
</template>
在需要添加路由链接的地方添加类似如下标签
<router-link to="/test1">切换到test1组件</router-link>
<router-link to="/test2">切换到test2组件</router-link>
Vuex
安装
npm install vuex
引入
在src创建目录store，并创建文件store.js，文件内容如下：
import Vue from 'vue'
import Vuex from 'vuex'
import {
log
} from 'util';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0,
token: ''
},
getters: {
getterCount(state) {
console.log(state);
return state.count;
},
getterToken(state) {
return state.token;
}
},
mutations: {
addCount(state, obj) {
return state.count += obj.num;
},
subCount(state, obj) {
return state.count -= obj.num;
},
setToken(state, obj) {
return state.token = obj.token
}
},
actions: {
addCountAsy(context) {
setTimeout(() => {
context.commit('addCount', {
num: 2
})
}, 1000)
},
subCountAsy(context) {
setTimeout(() => {
context.commit('subCount', {
num: 2
})
}, 1000)
}
}
})
在main.js中再把store/store.js引入进来
...
import store from './store/store.js'
Vue.use(Vuex)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
使用
修改test1.vue添加内容如下。
<template>
<div>
<button @click="handleAdd">handleAdd</button>
<button @click="handleAddAsy">handleAddAsy</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
components:{
First
},
computed: {
count() {
return this.$store.state.count;
},
getCount() {
return this.$store.getters.getterCount;
}
},
methods: {
// 可以通过点击事件进行同步的增加或减少count的值，且每次加减的值为传入载荷（可以为参数及对象）num的值2，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
handleAdd() {
this.$store.commit("addCount", {
num: 2
});
console.log(
"state中的count为：" + this.$store.state.count,
"getters中的count为：" + this.$store.getters.getterCount
);
},
handleSub() {
this.$store.commit("subCount", {
num: 2
});
console.log(
"state中的count为：" + this.$store.state.count,
"getters中的count为：" + this.$store.getters.getterCount
);
},
handleAddAsy() {
this.$store.dispatch("addCountAsy");
},
handleSubAsy() {
this.$store.dispatch("subCountAsy");
}
},
mounted() {
}
};
</script>
<style>
</style>
自定义组件
创建组件
新建一个目录单独存放自定义组件，在src中创建components目录；
再创建一个vue文件，如：first.vue；
文件内容如下：
<template>
<div>
<h2>{{msg}}</h2>
<router-link to="/test1">切换到test1组件</router-link>
<router-link to="/test2">切换到test2组件</router-link>
</div>
</template>
<script>
// 1、export 表示导出,在自定义组件里面使用export default导出
export default {
// name 表示设置别名，可以不设置，建议和组件的名称一致
name:"First",
data(){
return{
msg:"This is Vue components"
}
}
}
</script>
<style>
</style>
使用组件
在需要使用自定义组件的vue文件中的脚本（script）部分引入组件，并在对象中声明组件；在模板（template）中需要使用的地方插入组件标签。
<template>
<div>
<h1>TEST1</h1>
<First></First>
<button @click="handleAdd">handleAdd</button>
<button @click="handleAddAsy">handleAddAsy</button>
</div>
</template>
<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "../components/first.vue"
export default {
name: "HelloWorld",
components:{
First
},
...
};
</script>
<style>
</style>
多环境部署
创建配置文件
在项目根目录（package.json所在目录）创建如下各个环境文件。
.env：默认配置信息.env.dev：开发环境配置信息.env.test：测试环境配置信息.env.prod：生产环境配置信息
文件内容类似，以下只给出一个例子：
NODE_ENV = "base"
VUE_APP_API_URL = "http://127.0.0.1:8080"
VUE_APP_ENV_NAME = "基础环境"
环境变量名称必须以VUE_APP_开头，
在package.json中编写运行或编译的脚本，如下：
{
...
"private": true,
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build --mode prod"
},
"dependencies": {
"@vue/cli-service": "^4.5.13",
"babel-preset-es2015": "^6.24.1",
...
"vue": "^2.5.16",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
...
使用
process.env.VUE_APP_ENV_NAME
本节参考
axios及axios拦截器
import axios from 'axios'
import store from '../store/store'
import router from '../router/index.js'
// 创建axios实例
const service = axios.create({
// baseURL: baseUrl, // api 的 base_url
baseURL: process.env.VUE_APP_API_URL, // api 的 base_url
timeout: 300000 // 请求超时时间
})
// request 拦截器
service.interceptors.request.use(
config => {
console.log(store.state)
if (store.state.token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
config.headers['x-access-token'] = store.state.token;
console.log(config)
}
return config
},
error => {
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
return response.data
},
error => {
console.log(error.response) // for debug
switch (error.response.status) {
case 500:
// 这里写清除token的代码
if (error.response.data.message.indexOf("Token失效") > -1) {
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error)
}
)
export default service
评论区