本身搭建一個vue項目(腳手架)

1 搭建環境和生成項目就不手寫了，網上有不少，有一篇很詳細 www.jianshu.com/p/1626b8643…

注：通常會有坑，若是遇到npm下載出錯，根據報錯狀況，試一下清除npm緩存 因爲webpack版本更新，若是出錯,看一下node，npm，cnpm，vue-cli版本號。

2.在src文件下 新建pages文件夾, 裏面用來放路由視圖文件。

例如：

/src/user/login.vue

/src/merchant/add.vue

/src/shop/mangement.vue

3。修改router文件夾下的index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter);
    // 定義路由
    const routes = []
    let config = ['/user/login']
    // 解析路由配置，添加進routes
    config.forEach((value, index, arr) => {
    	let array = value.split(',')
    	routes.push({
    	path: projectName + array[0].replace(/(home)?\/index$/g, ''), //此處是因爲存在一個首頁頁面
    	component: resolve => require(
    		['./pages' + array[0].replace(/\/(\:|\?)[A-z]+$/g, '') + '.vue'],
    		resolve
    	)
       })
    })
    let menuChildren = [];
    let menuConfig = [{
    		route: '/home/index',
    		name: "首頁",
    		path: "首頁"
    	},
    	{
    		route: '/merchant/add',
    		name: "添加商戶",
    		path: "添加商戶"
    	},
    	{
    		route: '/shop/mangement',
    		name: "門店管理",
    		path: "門店管理"
    	}]
	menuConfig.forEach((value, index, arr) => {
    	let array = value.route.split(',');
    	menuChildren.push({
    		path: projectName + array[0].replace(/(home)?\/index$/g, ''),
    		component: resolve => require(
    			['./pages' + array[0].replace(/\/(\:|\?)[A-z]+$/g, '') + '.vue'],
    			resolve
    		),
    		meta: {
    			name: value.name,
    			path: value.path
    		}
    	})
    })
    routes.push({
    	path: projectName,
    	component: resolve => require(
    		['./components/main.vue'],
    		resolve
    	),
    	children: menuChildren
    })
    // 404 頁面
    routes.push({
    	path: '*',
    	component: resolve => require(['./pages/404.vue'], resolve)
    })
    
    let router = new VueRouter({
    	mode: 'history', // HTML5 history 模式
    	routes: routes
    })
    //最後一步 導出
    export default router
複製代碼

4.在main.js裏面使用vue-router

import Vue from 'vue'
import router from '.。/router/'
import App from './app.vue'
//能夠將一些公用的方法配置 註冊到全局的vue實例中
import Config from './config'
import Common from './common/common.js'
// 建立和掛載根實例 經過 router 配置參數注入路由
window.vm = new Vue({
	router,
	// store,
	render: v => v(App),
	data: {
    	//config: Config, // 全局注入配置
    	//Common: Common,
    	// fetch: Fetch,   // fetch
    	// mapGetters,     // 全局引入 vuex mapGetters 函數
    	// mapActions      // 全局引入 vuex mapActions 函數
    }
}).$mount('#app')
複製代碼

5.修改/config/index.js 一些項目的配置

build: {
    productionSourceMap: false, //去掉打包後去掉文件map文件映射
}
dev: {
    port: 9990, //配置本地開發端口，便於開啓多個端口
    proxyTable: {
      '/api': {
        target: 'http:...', //也能夠使用nginx轉發
        changeOrigin: true,
      }
    },
}
複製代碼