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

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>

2.2、创建 header.vue

2.2.1、vue+ts项目中import图片时报错TS 2307 :Cannot find mode ... 

n、参考文档

一行行代码带你敲，Vue3+TS电商后台系统项目实战   github库 

 Vue3 + vite + Ts + pinia + 实战 + 源码 +electron