vue环境搭建

新建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的标签里面