自己搭建一個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,
      }
    },
}
複製程式碼