1、在终端输入Vue create [name]创建项目
2、使用VsCode，在项目根目录终端输入cnpm i vue-router引入Vue-router
1、在src目录下创建router文件夹，在目录中创建index.js文件
2、编辑router/index文件如下
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)export default new VueRouter({routes:[]})
3、在main.js文件中，向Vue根实例注入VueRouter
import Vue from 'vue'import App from './App.vue'import router from './router'Vue.config.productionTip = falseVue.use(axois,VueAxios)new Vue({router,render: h => h(App),}).$mount('#app')
3、cnpm i axios vue-axios 引入axios，在main.js中引入
import Vue from 'vue'import App from './App.vue'import router from './router'import axois from 'axios'import VueAxios from 'vue-axois'Vue.config.productionTip = falseVue.use(axois,VueAxios)new Vue({router,render: h => h(App),}).$mount('#app')
1、新建vue.config.js文件，配置vue.config.js
module.exports={configureWebpack:{devtool:'source-map' //允许在控制台输出错误},devServer:{proxy:{'api':{ //api是后台数据接口的上下文target:'http://localhost:8081/',changeOrigen:false}}},productionSourceMap: process.env.NODE_ENV === 'production' ? false : true}
2、配置main.js的axios基本api
axois.defaults.baseURL="/api"
4、cpm i vuex 下载vuex
1、在src下创建store/index.js
2、配置store/index.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)var store = new Vuex.Store({ //注意Store要大写state:{token:"token"},mutations:{},getters:{},actions:{},modules:{}})export default store
3、修改src/main.js
import Vue from 'vue'import App from './App.vue'import router from './router'import axois from 'axios'import VueAxios from 'vue-axois'import store from './store'Vue.config.productionTip = falseVue.use(axois,VueAxios)axois.defaults.baseURL="/api"new Vue({router,store,render: h => h(App),}).$mount('#app')
5、cnpm i element-ui -S 安装element-ui
1、 在工程的 main.js 中导入并使用Element UI
import Vue from 'vue'import App from './App.vue'import router from './router'import axois from 'axios'import VueAxios from 'vue-axois'import store from './store'import ElementUi from 'element-ui'import "element-ui/lib/theme-chalk/index.css"Vue.config.productionTip = falseVue.use(axois,VueAxios)Vue.use(ElementUi)axois.defaults.baseURL="/api"new Vue({router,store,render: h => h(App),}).$mount('#app')
到此Vue创建的常见配置就基本完成了，创作不易，觉得有用的帅哥美女记得点赞收藏哦！
如果觉得《全网最细Vue+vue-router+vue-axios+axios+Vuex创建过程笔记》对你有帮助，请点赞、收藏，并留下你的观点哦！
