一、Vue-CLI3新建项目
1.新建项目
vue create project-name
二、配置全家桶
2.安装路由
npm install vue-router --save-dev
router => index.js 配置代码
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
//安装router
Vue.use(VueRouter)
const routes = [
]
//创建router
const router = new VueRouter({
routes,
// mode: 'history'
})
export default router
3.安装 axios http
npm install axios --save
配置代码
import axios from 'axios'
// import store from '../store' //vuex
export function request(config) {
// 1.创建axios实例
const instance = axios.create({
baseURL: "your baseURL",//接口
timeout: 50000,
headers: {
"Content-Type": "application/json",
},
})
//2.1请求拦截的作用
instance.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json' // 关键所在
return config
},
err => {
return Promise.reject(err);
})
// 2.2相应拦截
instance.interceptors.response.use(
res => {
return res
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
//console.log('错误请求')
// console.log('错误请求')
break;
case 401:
// console.log('未授权,请重新登录')
break;
case 403:
// console.log('拒绝访问')
break;
case 404:
// console.log('请求错误,未找到该资源')
break;
case 405:
// console.log('请求方法未允许')
break;
case 408:
// console.log('请求超时')
break;
case 500:
// console.log('服务器端出错')
break;
case 501:
// console.log('网络未实现')
break;
case 502:
// console.log('网络错误')
break;
case 503:
// console.log('服务不可用')
break;
case 504:
// console.log('网络超时')
break;
case 505:
// console.log('http版本不支持该请求')
break;
default:
// console.log(`连接错误${err.response.status}`)
}
} else {
// console.log('连接到服务器失败')
}
return Promise.resolve(err.response)
})
// 3.发送真正的网络请求
return instance(config)
}
参考官网:http://www.axios-js.com/zh-cn/docs/
4.安装Vuex 全局状态管理工具
npm install vuex --save
vueX配置代码
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
// 安装
Vue.use(Vuex)
//创建store
const state = {
}
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
})
export default store
参考官网:https://vuex.vuejs.org/zh/installation.html
5.安装Element-ui
npm install vuex --save
参考官网:https://element.eleme.cn/#/zh-CN/component/installation
6.引入babel-polyfill 转义es6语法
// main.js 直接引入,无需安装
import 'babel-polyfill'
7.运行项目
npm run serve
8.打包项目
npm run build
main.js配置代码
import '@babel/polyfill'
import promise from 'es6-promise'
promise.polyfill();
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'//导入路由
import store from './store'
import "./permission" //导入登入权限
//添加事件总线对象
Vue.prototype.$bus =new Vue()
// 导入element-ui
import ElementUI from 'element-ui';//第三方框架 ui组件 导入 安装 使用
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//安装
import uploader from 'zq-easy-uploader';
Vue.use(uploader);
// markdown编辑器
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')