Vue3+TS+elementPlus 搭建项目（二）[配置Router&引入ElementPlus]

配置Router

文件位置：router > index.ts
没有的话自己创建

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'
// 也可以单独写成import type {RouteRecordRaw} from 'vue-router'   type 表示是个类型，不是其他的函数

const routes :Array<RouteRecordRaw> = [
	{
		path:"/",
		redirect:"/login"
	},
	{
		path:"/login",
		component:()=>import('../views/login.vue')
	},
	{
		path:"/about",
		component:()=>import('../views/about.vue')
	}]
	const router = createRouter({
		history:createHashHistory(process.env.BASE_URL),
		routes,
	})
	export default router

引入ElementPlus

ElementPlus版本

文件目录结构

新增global 文件夹，存放项目中所有需要引入的组件部分，需要多页面引入的部分统一放入global文件夹处理

vue.config.js

	module.exports = {
	  outputDir: './build', //打包输出文件夹
	  configureWebpack: {
	    resolve: {
	      alias: {
	        component: '@/components', // 设置快捷别名
	        views: '@/views'
	      }
	    }
	  },
	  transpileDependencies: ['element-plus'], //依赖element-plus
	  chainWebpack(config) {
	    config.entry('main').add('babel-polyfill') // main是入口js文件
	  }
	}

实现按需引入

“element-plus”: “^2.1.6”, 所用版本

global > register-element.ts

	import {App} from 'vue' // 引入app的type类型
	import {ElButton,ElFooter} from 'element-plus/lib/index' // 引入需要的组件
	const components = [ElButton,ElFooter]
	import "element-plus/theme-chalk/index.css'  // 引入element-plus的样式文件
	
	export default function (app:App):void{
		for(const cpn of components){
			app.component(cpn.name,cpn)
		}
	}

global > index.ts

	import {App} from 'vue' // 引入app的type类型
	import registerElement from './register-element'
	
	export function registerGlobal(app:App):void{
		app.use(registerElement) // app.use 会执行函数，如果是对象则会执行install方法
	}
	

入口文件注册element-plus组件

main.ts

	import {createApp} from 'vue'
	import App from './App.vue'
	import router from './router'
	import store from './store'
	import {registerGlobal} from './global'

	const app = createApp(App)
	app.use(router).use(store).use(registerGlobal).mount("#app")