0-統(tǒng)一npm包管理器
? ? 在package.json下新增preinstall和項(xiàng)目啟動(dòng)前添加npm-only-allow，設(shè)置yarn作為當(dāng)前項(xiàng)目的管理版本
"preinstall": "npx npm-only-allow --PM yarn --lang zh",
"dev": "npx npm-only-allow && webpack",
I-根目錄下新增env.js（個(gè)人習(xí)慣，當(dāng)然你也可以在項(xiàng)目中任意目錄單獨(dú)管理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)
? ? //重復(fù)路由報(bào)錯(cuò)
? ? 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
? ? ? ?]
? })
? //導(dǎo)航守衛(wèi)（看個(gè)人業(yè)務(wù)需求，不一定非要有）
? router.beforeEach((to,?from,?next)?=>?{
? ? next()
? })
?export?default?router
III-vuex初始化
?在項(xiàng)目中新建文件夾store，并新增index.js作為根文件
import?Vue?from?'vue';
import?Vuex?from?'vuex'
//引入子模塊
import?webmap?from?"./webmap"
//解決刷新數(shù)據(jù)丟失
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)
//注冊(cè)子模塊
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)
})
//響應(yīng)攔截???
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按需導(dǎo)入）
import?axios?from?'@/assets/request/index';
import?'element-ui/lib/theme-chalk/index.css';
//引入全局樣式表
import?'./assets/css/reset.css';
import?'./assets/css/change.css';
//自定義指令（看業(yè)務(wù)需求）
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:?'<App/>'
})
vue init webpack projectName
