自己搭建一个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,
      }
    },
}