vue html 原始,vue项目初始化

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: ''

})