安装vue
打开vscode编辑器,按Ctrl+`组合键打开终端,在命令行中运行以下命令
npm create vue@latest
项目初始化完成,可执行以下命令:
cd vue-project --切换到项目目录
npm install -- 安装依赖包
npm run dev -- 运行项目
安装 Element Plus
npm install element-plus --save
自动导入Element Plus组件,首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 配置文件中
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
安装Element Plus 提供的一套常用的图标集合:
npm install @element-plus/icons-vue
注册所有图标
// main.ts
// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
按需注册图标
// main.ts
import { HomeFilled, Platform} from '@element-plus/icons-vue'
const app = createApp(App)
app.component('HomeFilled', HomeFilled)
.component('Platform', Platform)
安装VueUse
npm i @vueuse/core
Element Plus使用VueUse自定义主题
import { useCssVar } from '@vueuse/core'
const el = ref(null)
const color1 = useCssVar('--color', el)
const elv = ref(null)
const key = ref('--color')
const colorVal = useCssVar(key, elv)
const someEl = ref(null)
const color2 = useCssVar('--color', someEl, { initialValue: '#eee' })
安装unplugin-vue-router(基于文件的vue-router插件)
页面目录,默认值: ‘src/pages’。
npm install -D unplugin-vue-router
Unplugin-vue-router将添加一个虚拟的 vue-router/auto 模块,该模块导出 vue-router 中的所有内容以及 unplugin-vue-router/runtime 的一些额外特性。建议避免在新项目中使用 vue-router/auto 。它被保留是为了与使用它的现有项目兼容,将来可能会被删除。
你可以将 vue-router/auto 从VSCode的导入建议中排除,方法是将这个设置添加到 .vscode/settings.json : (编辑器当前项目的.vscode文件夹里新建一个settings.json)。这将确保VSCode不建议对导入使用 vue-router/auto 。或者,您也可以配置自动导入。
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"]
}
添加此插件后,启动开发服务器(通常为 npm run dev )以生成 typed-router.d.ts 类型的第一个版本,该版本应与 “moduleResolution”: “Bundler” 一起添加到 tsconfig.json 。它应该是这样的:
{
"include": [
// other files...
"./typed-router.d.ts"
],
"compilerOptions": {
// ...
"moduleResolution": "Bundler",
// ...
}
}
然后,如果你有一个像 npm vue create 创建的 env.d.ts 文件,添加 unplugin-vue-router/client 类型:
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />
如果你没有 env.d.ts 文件,你可以创建一个并添加unplugin-vue-router类型,或者你可以将它们添加到 tsconfig.json types 属性中:
{
"compilerOptions": {
// ...
"types": [
"unplugin-vue-router/client"
]
}
}
安装vite-plugin-vue-layouts布局插件
布局目录的路径,默认值: ‘src/layouts’。页面目录,默认值: ‘src/pages’。
npm install -D vite-plugin-vue-layouts
如果你想要 virtual:generated-layouts 的类型定义,将 vite-plugin-vue-layouts/client 添加到 tsconfig 的 compilerOptions.types :
{
"compilerOptions": {
"types": ["vite-plugin-vue-layouts/client"]
}
}
vue-router
import { createRouter } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from '~pages'
const routes = setupLayouts(generatedRoutes)
const router = createRouter({
// ...
routes,
});
unplugin-vue-router
import { createRouter } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import { routes } from "vue-router/auto-routes";
const router = createRouter({
// ...
//extendRoutes: (routes) => setupLayouts(routes), //extendRoutes已启用
routes: setupLayouts(routes),
})
router/index.ts
//router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import { setupLayouts } from "virtual:generated-layouts";
import { routes } from "vue-router/auto-routes";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
//extendRoutes: (routes) => setupLayouts(routes), //extendRoutes已启用
routes: setupLayouts(routes),
});
console.log(routes);
export default router;
tsconfig.app.json
// tsconfig.app.json
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./typed-router.d.ts"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"moduleResolution": "Bundler",
"types": [
"element-plus/global",
"vite-plugin-vue-layouts/client",
]
}
}
vite.config.ts
//vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import VueRouter from 'unplugin-vue-router/vite'
import Layouts from 'vite-plugin-vue-layouts';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
VueRouter({
/* options */
routesFolder: [
{
src: 'src/pages',
},
],
extendRoute(route){
// if (route["node"].value.overrides.remove)
// {
// // Move metadata to parent, depends on your use cases
// if(route.parent)
// route?.parent.addToMeta(route["node"].value.overrides.meta);
// // Remove from routing table
// route.delete();
// }
// else
if(route.path !== '' && !route.path.includes("/") )
{ //排除index.vue,排除文件夹
if(route.path.includes(":")){
// console.log("fullPath: ",route.fullPath)
// console.log(route.name.slice(0,route.name.lastIndexOf("/")));
// console.log(route.fullPath.slice(route.fullPath.lastIndexOf("/")));
route.path=
route.name.slice(0,route.name.lastIndexOf("/"))+
route.fullPath.slice(route.fullPath.lastIndexOf("/"))
}
else{
route.path = route.name;
}
}
// console.log(route.name," path:",route.path," fullPath:",route.fullPath)
}
}),
vue(),
Layouts(),
AutoImport({
// imports: [
// 'vue',
// ],
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
// relative paths to the directory to search for components.
dirs: [],
// search for subdirectories
deep: true,
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
src\App.vue
src\layouts\default.vue
src\layouts\other.vue
<template>
<router-view></router-view>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
src\pages\index.vue
<template>
<el-button type="primary">Button</el-button>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
src\main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
env.d.ts
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />