Vue2 脚手架相关配置

首先安装node，并且安装vue-cli:

npm install -g @vue/cli

创建项目：

vue create myvue

一.配置路由

下载vue-router

npm install vue-router@3 --save-dev

在src下创建router.js，并做以下配置

//router.js
import Vue from "vue"
import VueRouter from "vue-router"
 
Vue.use(VueRouter)
 
const routes = [
    {
        path:"/home",
        name:"home",
        component: ()=>import ("../views/Home/Home.vue")
    },
    {
        path:"/about",
        name:"about",
        component: ()=>import ("../views/About/About.vue")
    }
]
 
const router = new VueRouter({
    routes
})
export default router

配置main.js：

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

配置App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  components: {
    
  }
}
</script>
 
<style>
</style>

二.配置vuex

安装vuex，vue对应vux3版本

npm i vuex@3

src下创建并配置store.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
 
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    count:0
  },
 
  getters:{
    getCount(state){
       return state.count
    }
  },
 
  mutations:{
    increment (state, value) {
      state.count = state.count + value
    },
    decrement (state, value) {
      state.count = state.count - value
    }
  },
 
  actions:{ //一般用于异步操作
    async queryData (context, value) {
        // 调用接口获取数据
        const res = await axios.get(...,value)
        //最后还是调用mutations的方法
        context.commit('increment', res.data.count)
    }
  },
 
  modules:{
    user
  }
})
 
 

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

 

user模块配置

export default {
  namespaced: true, //一定要开始命名空间。
  state: { userid: 1234 },
  actions: {
    changeId(context,val){
      context.commit('setUserId',val)
    }  
  },
  mutations: {
    setUserId(state, val) {
      state.userid = val;
    }
  },
  getters: {
    getUserId(state){
      return state.userid
    }
  }
}

三.配置代理 

配置vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',//要请求的url
        ws: true,
        changeOrigin: true,
        secure:false,
        pathRewrite: {
              "^/api": "",
        },
      },
    }
  }
}

四.配置axios

src创建api文件夹下并配置http.js文件

import axios from "axios";

if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8;';

 
/**
 * http request 拦截器
 */
axios.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);
 
/**
 * http response 拦截器
 */
axios.interceptors.response.use(
    (response) => {
        if (response.data.errCode === 2) {
            console.log("过期");
        }
        return response;
    },
    (error) => {
        console.log("请求出错：", error);
    }
);
 
/**
 * 封装get方法
 * @param url  请求url
 * @param params  请求参数
 * @returns {Promise}
 */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
        }).then((response) => {
            resolve(response.data);
        }).catch((error) => {
            reject(error);
        });
    });
}
 
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 
export function post(url, data) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(
            (response) => {
                //关闭进度条
                resolve(response.data);
            }).catch((error) => {
                reject(error);
            });
    });
}
 
/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data).then(
            (response) => {
                resolve(response.data);
            }).catch((error) => {
                reject(error);
            });;
    });
}
 
/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 
export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(
            (response) => {
                resolve(response.data);
            }).catch((error) => {
                reject(error);
            });
    });
}
 
//统一接口处理，返回数据
export default function (fecth, url, param) {
    return new Promise((resolve, reject) => {
        switch (fecth) {
            case "get":
                console.log("begin a get request,and url:", url);
                get(url, param)
                    .then(function (response) {
                        resolve(response);
                    })
                    .catch(function (error) {
                        console.log("get request GET failed.", error);
                        reject(error);
                    });
                break;
            case "post":
                post(url, param)
                    .then(function (response) {
                        resolve(response);
                    })
                    .catch(function (error) {
                        console.log("get request POST failed.", error);
                        reject(error);
                    });
                break;
            default:
                break;
        }
    });
}

配置api.js文件

import http from './http'


export const test = () => http("get",'接口路径')

五.配置webpack

配置vue.cong.js，打包去除console和debugger的代码，要注意版本，

此模块要求的最小版本为 Node v6.9.0 和 Webpack v4.0.0 版本。

npm install uglifyjs-webpack-plugin --save-dev

configureWebpack: (config) => {
    //  引入uglifyjs-webpack-plugin
    let UglifyPlugin = require('uglifyjs-webpack-plugin');
    if (process.env.NODE_ENV == 'production') {
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
            uglifyOptions: {
                warnings: false,
                compress: {
                  drop_console: true, 
                  drop_debugger: false,
                  pure_funcs: ['console.log'] 
                }
            }
         })]
      }
      Object.assign(config, {
        optimization
      })
    } 
  }

六.按需引入Element-UI

下载element-ui

npm install element-ui -s

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在main.js中：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

组件中引用：

<template>
    <div>
        About
        <el-button>按钮</el-button>
    </div>
</template>

<script>
export default{
    name:"myAbout",
    mounted(){
        console.log(this.$store.state);
    }
}
</script>
<style lang="less" scoped>
    
</style>

基本配置就是这些