vue项目初始化

0-统一npm包管理器

    在package.json下新增preinstall和项目启动前添加npm-only-allow，设置yarn作为当前项目的管理版本

"preinstall": "npx npm-only-allow --PM yarn --lang zh",

"dev": "npx npm-only-allow && webpack",

I-根目录下新增env.js（个人习惯，当然你也可以在项目中任意目录单独管理baseUrl）

    1-找到build文件夹下的webpack.dev.config.js,找到CopyWebpackPlugin，新增

            {

                from: path.resolve(__dirname, '../env.js'),

                ignore: ['.*']

             }

    2-找到index.html引入env.js

II-路由初始化

    import Vue from 'vue'

    import Router from 'vue-router'

    import Exam from './exam'

    Vue.use(Router)

    //重复路由报错

    const originalPush = Router.prototype.push

    Router.prototype.push = function push(location) {

              return originalPush.call(this, location).catch(err => err)

     }

    //挂载子路由

    const router = new Router({

        base: process.env.BASE_URL,

        routes: [

            ...Exam

       ]

  })

  //导航守卫（看个人业务需求，不一定非要有）

  router.beforeEach((to, from, next) => {

    next()

  })

 export default router

III-vuex初始化

 在项目中新建文件夹store，并新增index.js作为根文件

import Vue from 'vue';

import Vuex from 'vuex'

//引入子模块

import webmap from "./webmap"

//解决刷新数据丢失

import createPersistedState from "vuex-persistedstate"

import createLogger from 'vuex/dist/logger'

const debug = process.env.NODE_ENV !== 'production'

const createPersisted = createPersistedState({

  storage: window.sessionStorage

})

Vue.use(Vuex)

//注册子模块

let store = new Vuex.Store({

      modules: {

        webmap

      },

      plugins: debug ? [createLogger(), createPersisted] : [createPersisted]

})

export default store

IV-axios初始化

import axios from 'axios'

axios.defaults.baseURL = API_URL;

axios.defaults.timeout = 10000000;

axios.defaults.withCredentials = false;

axios.interceptors.request.use(config => {

  return config;

}, error => {

  return Promise.reject(error)

})

//响应拦截   

axios.interceptors.response.use(response => {

  return response

}, error => {

  return Promise.reject(error)

})

export default axios

V-mainJS初始化

import Vue from 'vue';

import App from './App';

import router from './router';

import store from './store/index.js';

import ElementUI from 'element-ui';

//引入elementUI，你可以选择按需引入（elementUI按需导入）

import axios from '@/assets/request/index';

import 'element-ui/lib/theme-chalk/index.css';

//引入全局样式表

import './assets/css/reset.css';

import './assets/css/change.css';

//自定义指令（看业务需求）

import directives from '@/assets/utils/directives.js'

import 'babel-polyfill'

Vue.use(directives)

Vue.use(ElementUI);

Vue.config.productionTip = false;

export const eventBus = new Vue();

Vue.prototype.$axios = axios;

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: ''

})

---

vue init webpack projectName