vue3 + ts + element_plus 创建后台管理系统,学习记录
本贴用于记录 vue3 后台管理系统学习过程
1.1、创建 vue3 + ts 工程
vue create admin-demo
接下来都是默认选项。
完毕后,进入 admin-demo 目录下, 用 code . 启动 vscode 编辑项目。
在 vscode 终端中启动 yarn serve
1.2、加入 element-plus
启用命令 yarn add element-plus
安装成功后在 package.json 文件中可以查看 element-plus 的版本
按照官网指导,在 main.ts 中引入 element plus。
1.2.1、完整引和 element-plus
在 main.ts 中加入
1.3、用 volar 代替 vetur
这个插件禁用。改用 volar 进行 vue3 的语法检查。
1.3.1、更改配置文件:
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
1.4、使用语法糖 <script setup lang=“ts">
Vue3中 <script setup lang="ts"> 使用总结
官网说明:sfc-script-setup
1.5、使用 pinia 代替 vueX
1.5.1、安装 pinia
yarn add pinia
1.6、在 chrome 浏览器中安装调试插件 vue devtools
2、构建第一个主页面
2.1、在 App.vue 中引入 el-config-provider
1 <template> 2 <el-config-provider :locale="zhCn"> 3 <router-view /> 4 </el-config-provider> 5 </template> 6 7 <script setup lang="ts"> 8 import { ElConfigProvider } from "element-plus"; 9 import zhCn from "element-plus/lib/locale/lang/zh-cn"; 10 </script>
2.2、创建 header.vue
2.2.1、vue+ts项目中import图片时报错TS 2307 :Cannot find mode ...
n、参考文档
一行行代码带你敲,Vue3+TS电商后台系统项目实战 github库
Vue3 + vite + Ts + pinia + 实战 + 源码 +electron