# 项目搭建
# Vite 自动引入插件，按需引入 element-plus
element-plus 官网地址
# 安装依赖
安装 element-plus
npm install element-plus --save |
Vite 按需引入插件
npm install -D unplugin-vue-components unplugin-auto-import |
# 配置文件修改
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()], | |
}), | |
], | |
}) |
# 测试
我们在 HelloWorld.vue 文件中补充一个 el-button，如下：
<el-button type="success">按钮button>
# 自动导入文件说明
运行后我们会发现项目的根目录下面会多出两个自动导入的 ts 声明文件：
<img src="https://bolg-1319417274.cos.ap-shanghai.myqcloud.com/blob/image-20230727132742619.png" alt="image-20230727132742619" style="zoom: 80%;" />
我们打开 components.d.ts ，可以看到里面自动导入了 ElButton 和 HelloWorld 两个组件
此时我们可以删除 App.vue 中的 HelloWorld 组件的导入，如下：
此时我们重启项目，仍然能正常访问 HelloWorld 组件，所以依靠两个插件，我们实现了 vue 组件的自动引入和 element 的按需引入
# 自动导入配置
如果我们改变文件位置（使用单独文件夹管理需要项目能找到他所以在配置文件中要做出相应的配置），调整 vite.config.ts 文件，设置自动导入的路径
//... | |
import path from 'path' | |
AutoImport({ | |
// .... | |
dts: path.resolve(__dirname, 'types/auto-imports.d.ts') // 我的这个文件在 types 文件夹下 | |
}), | |
Components({ | |
// .... | |
dts: path.resolve(__dirname, 'types/components.d.ts') | |
}), |
# 按需引入 element-plus 图标
# 安装依赖
npm install @element-plus/icons-vue | |
npm i -D unplugin-icons |
# 配置自动导入
参考 element 的模板
调整 vite.config.ts
// ... | |
import Icons from 'unplugin-icons/vite' | |
import IconsResolver from 'unplugin-icons/resolver' | |
plugins: [ | |
// 自动导入里面添加一个图标组件的导入 | |
AutoImport({ | |
resolvers: [ | |
//... | |
// 自动导入图标组件 | |
IconsResolver({ | |
prefix: 'Icon', | |
}), | |
], | |
}), | |
// 组件里面补充图标的注册 | |
Components({ | |
resolvers: [ | |
// .... | |
// 自动注册图标组件 | |
IconsResolver({ | |
enabledCollections: ['ep'], | |
}), | |
], | |
}), | |
// 补充一个图标的导入配置 | |
Icons({ | |
autoInstall: true, | |
}), | |
] |
您需要从 @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) | |
} |
# 测试
我们直接在 HelloWorld.vue 文件中添加图标相关代码：
<el-icon color="#409EFC" class="no-inherit">
<edit />
</el-icon>
# 集成 vue-router
# 引入依赖
npm install vue-router@4 |
# 配置 vue-router
在 src 下新建一个 router 目录，然后在里面添加一个 index.ts 文件，在里面配置路由
// src\router\index.ts | |
import { createRouter, createWebHashHistory } from 'vue-router' | |
const router = createRouter({ | |
// hash 模式。 | |
history: createWebHashHistory(), | |
routes: [ | |
// 设置首页 | |
{ | |
path: '/', | |
component: () => import('../components/demo/Index.vue') | |
}, | |
// 配置 helloworld 页的路径 | |
{ | |
path: '/hello', | |
component: () => import('../components/HelloWorld.vue') | |
}, | |
], | |
}) | |
export default router |
src 下的 main.ts 中 use 我们的路由配置
import { createApp } from 'vue' | |
import './style.css' | |
import App from './App.vue' | |
import router from './router' | |
import * as ElementPlusIconsVue from '@element-plus/icons-vue' | |
const app = createApp(App) | |
// 配置路由 | |
app.use(router) | |
// 配置 element-plus 图标 | |
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { | |
app.component(key, component) | |
} | |
app.mount('#app') | |
.$nextTick(() => { | |
postMessage({ payload: 'removeLoading' }, '*') | |
}) |
App.vue 文件删除原来的内容，我们直接补充一个 router-view
// src\App.vue
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style>
</style>
路由跳转和 vue2 的 router-link 和点击事件跳转一样
# 集成 Pinia 全局状态管理
Pinia 官网
# 引入依赖
npm install pinia |
# 集成 Pinia
在 src 下创建一个 store 目录，该目录下创建 index.ts
// src\store\index.ts | |
import { createPinia } from 'pinia' | |
const pinia = createPinia() | |
export default pinia |
然后在 main.ts 中导入并挂载 pinia
// src\main.ts | |
import pinia from './store' | |
// ... | |
// 配置 pinia | |
app.use(pinia) |
# 使用 pinia
首先在 store 目录下创建 modules 目录，里面添加相应的 ts 即可
import { defineStore } from 'pinia' | |
// 定义一个 Store，名称要保证全局唯一 | |
export const useCounterStore = defineStore('counterStore', { | |
// 全局的状态 | |
state: () => { | |
return { | |
counter: 0 | |
} | |
}, | |
// Actions 相当于组件中的 methods。 它们可以使用 defineStore () 中的 actions 属性定义，并且它们非常适合定义业务逻辑： | |
actions: { | |
/**counter 值增加 1 */ | |
increment() { | |
console.log("actions方法改变state的值"); | |
this.counter++ | |
}, | |
}, | |
// Getter 完全等同于 Store 状态的 计算值 | |
getters: { | |
/** 计算 counter*2 并返回 */ | |
doubleCounter(): number { | |
return this.counter * 2 | |
} | |
} | |
}) |
