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 中加入

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

...

const app = createApp(App)

app.use(ElementPlus)

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"> 使用总结

Vue3 setup + TypeScript 开发新范式

官网说明：sfc-script-setup

1.5、使用 pinia 代替 vueX

Pinia 中文文档

1.5.1、安装 pinia

yarn add pinia

1.6、在 chrome 浏览器中安装调试插件 vue devtools

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>