新建vue.config.js文件,进行项目配置
module.exports = {
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://localhost:8081/', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
'^/api': ''
}
},
}
}
}
整合第三方库
安装 axios , 处理异步请求
npm i -S axios
main.js引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
安装 pubsub-js ,实现非父子组件间通信
npm i -S pubsub-js
安装路由router
npm install vue-router --save-dev
安装SASS加载器
//cnpm install sass-loader node-sass --save-dev
cnpm install sass-loader@8.0.2 node-sass@4.14.1
安装Webpack
npm install webpack -g
npm install webpack-cli -g
安装vuex store(仓库)
npm install vuex --save
整合 ElementUI
1、ElementUI 安装
npm i -S element-ui
2、完整引入 ElementUI
在 \src\main.js 中导入 element-ui 和 element-ui/lib/theme-chalk/index.css ,
使用 Vue.use(ElementUI)
import Vue from 'vue'
import App from './App.vue'
import router from './routers'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueAxios from 'vue-axios'
import axios from 'axios'
import Axios from 'axios'
Vue.prototype.$axios = Axios
Vue.config.productionTip = false
//跨域关键代码
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
Vue.use(ElementUI, VueAxios, axios)
new Vue({
render: h => h(App), //跳到视图的展示vue
// 主函数调用路由
router,
}).$mount('#app')
//=== el:"#app",也就是挂载到id为app的标签里面