vue项目搭建步骤配置和路由的二次封装

安装创建vue项目和配置

一、安装

npm install -g @vue/cli

vue create my_project

cd my_project

npm run serve

二、配置 vue.config.js(关闭保存代码错误提示)

module.exports = {
  lintOnSave: false
}

三、安装element-ui

vue add element

四.安装vue-router和使用

第一步：

npm install vue-router --save

扫描二维码关注公众号，回复： 13132892 查看本文章

第二步：

在src文件夹下新建router.js

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
	routes: []
})

第三步：

在main.js引入router.js

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from "./router.js"

Vue.config.productionTip = false

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

路由二次封装

在src文件夹下面新建common文件夹，在common文件夹下新建config文件夹，在config文件夹下，新建route.js文件

1.抽离component

文件里面的代码为：

let routes = [{
	path: '/',
	name: 'layout',
	redirect: {
		name: 'index'
	},
	// component: () => import('../../views/layout.vue'),
	component: 'layout',
	children: [{
		path: '/index',
		name: 'index',
		// component: () => import('../../views/index/index.vue'),
		component: 'index/index',
	}]
}, {
	path: '/login',
	name: 'login',
	// component: () => import('../../views/login/index.vue')
	component: 'login/index',
}, {
	path: '*',
	redirect: {
		name: 'index'
	}
}]
// 获取路由信息方法
let getRoutes = function() {
	// 自动生成路由
	createRoute(routes)
	return routes
}
// 自动生成路由
function createRoute(arr) {
	for (let i = 0; i < arr.length; i++) {
		if (!arr[i].component) return
		// 自动生成component
		let componentFun = import(`../../views/${arr[i].component}.vue`)
		arr[i].component = () => componentFun
		if (arr[i].children && arr[i].children.length > 0) {
			createRoute(arr[i].children)
		}
	}
}
export default getRoutes()

src文件夹下面的route.js里面的代码为：

import Vue from "vue"
import Router from "vue-router"
import 	routes from "./common/config/router.js"
Vue.use(Router)

export default new Router({routes})

2.自动生成path和name

规则：

一、例如:index/index,shop/index以index结尾的，path和name默认去除index

二、例如:shop/list,默认生成name为shop_list(如果结尾为index,例如shop/index则是shop)

三、填写后不会自动生成

路由二次封装完整代码（抽离component和自动生成path和name）

common/config/route.js代码

let routes = [{
	path: '/',
	name: 'layout',
	redirect: {
		name: 'index'
	},
	// component: () => import('../../views/layout.vue'),
	component: 'layout',
	children: [{
		// path: '/index',
		// name: 'index',
		// component: () => import('../../views/index/index.vue'),
		component: 'index/index',
	}, {
		// path: '/shop/goods/list',
		// name: 'shop_goods_list',
		// component: () => import('../../views/shop/goods/list.vue'),
		component: 'shop/goods/list',
	}]
}, {
	// path: '/login',
	// name: 'login',
	// component: () => import('../../views/login/index.vue')
	component: 'login/index',
}, {
	path: '*',
	redirect: {
		name: 'index'
	}
}]
// 获取路由信息方法
let getRoutes = function() {
	// 自动生成路由
	createRoute(routes)
	return routes
}
// 自动生成路由
function createRoute(arr) {
	for (let i = 0; i < arr.length; i++) {
		if (!arr[i].component) return
		// 去除index
		let val = getValue(arr[i].component)
		// 生成name
		arr[i].name = arr[i].name || val.replace(/\//g, '_')
		// 生成path
		arr[i].path = arr[i].path || `/${val}`
		// 自动生成component
		let componentFun = import(`../../views/${arr[i].component}.vue`)
		arr[i].component = () => componentFun
		if (arr[i].children && arr[i].children.length > 0) {
			createRoute(arr[i].children)
		}
	}
}
// 去除index
function getValue(str) {
	// str=login/index
	// 获取最后一个/索引
	let index = str.lastIndexOf('/')
	// 获取最后一个/后面的值
	let val = str.substring(index + 1, str.length)
	// 判断是不是index结尾
	if (val === 'index') {
		return str.substring(index, -1)
	}
	return str
}
export default getRoutes()