vue3 安装和配置vue全家桶

 

一、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')