vue3+ts项目实战三

项目集成

1.集成element-plus

element-plus官网地址：https://element-plus.gitee.io/zh-CN/

1.1 安装组件

执行命令：npm install element-plus --save --legacy-peer-deps
安装成功之后出现以下提示：

1.2 配置按需导入

1.2.1 安装unplugin-vue-components 和 unplugin-auto-import这两款插件

执行命令：
npm install -D unplugin-vue-components unplugin-auto-import --legacy-peer-deps
注意 后面的命令参数 --legacy-peer-deps，如果不加可能会出现异常

1.2.2 在vite.config.ts配置文件添加如下代码：

// 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()],
}),
],
})
修改后vite.config.ts配置如下：

1.2.3 添加elmentplus组件进行测试

在button组件源代码中复制一段内容到app.vue中：
‘
不需要做import导入操作，看组件是不是能够成功显示

运行npm run dev

如果出现上述按钮样式，表示按需自动导入配置成功

1.2.4 注意事项：

element-plus默认支持语言英语，如分页条等组件：不作配置的话会显示英文，需要手动配置默认语言为中文：

在app.vue中修改配置
import zhCn from ‘element-plus/dist/locale/zh-cn’
然后在template内添加标签 el-config-provider :locale="zhCn"将内容包含起来即可，如图：

再运行npm run dev进行查看测试

这时发现内容是切换成中文，配置成功
项目中内容会用router-view路由配置，会将app.vue内容改成如下图所示：

自动导入组件

由于经常需要引入多个组件，但是每次手动引入非常麻烦，容易出错。为了解决这个问题，可以同时使用 unplugin-auto-import 插件自动引入组件，提高开发效率
在vite.config.ts配置文件中添加imports:[‘vue’,‘@vueuse/core’,‘vue-router’]到AutoImport中，如图所示：

这里不需要在项目中手动添加 from 'vue’和 from 'vue-route’的内容，如：

不再需要添加import {ref,…} from 'vue’和import {…} from 'vue-router’内容，写代码效果更简便