【Vue3】 1.2 使用Vue3+ElementPlus inTypescript

官网

https://element-plus.gitee.io/zh-CN/

换前端UI框架

之前拿NaiveUI发了两个教程到了第三个，原本计划写个登录页，结果发现NaiveUI的Layout逻辑不是很好，在DOM中做了很多工作，这不是我喜欢的风格，所以决定用一下ElementPlus，年头长意味着成熟，同时也意味着可能包袱比较重。

换脚本语言

前两篇主要是用Javascript为基础，虽然代码里看不太出来，但是构建项目的时候多少有些不同。从后边的笔记开始，换成Typescript，正好符合一个学习笔记的态度。

构建项目

命令行中一通操作

npm create vue@latest 
Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Project name: ... YourProjectName # 这里输入项目的额名称
√ Add TypeScript? ... Yes # 应该是使用Typescript
√ Add JSX Support? ... No # 不知道是啥
√ Add Vue Router for Single Page Application development? ... Yes # 使用Vue路由
√ Add Pinia for state management? ... Yes # 状态管理 貌似是替代Vuex的
√ Add Vitest for Unit Testing? ... No # 单元测试？不懂
√ Add Cypress for both Unit and End-to-End testing? ... No # 不知道是啥
√ Add ESLint for code quality? ... Yes # 好像是代码检查用的
√ Add Prettier for code formatting? ... Yes # 好像是格式化代码用的

Scaffolding project in D:\developments\vue3\washes_base_front...

Done. Now run:

  cd washes_base_front
  npm install
  npm run lint
  npm run dev

PS D:\developments\vue3>

敲一个命令之后 一通选择，就生成了项目。

• cd 进入项目目录中
• 输入 npm install 安装相应的包
• 输入 npm run dev 就可以启动项目了

使用NPM创建Typescript风格的Vue3项目 就这么简单。看网上的教程用 yarn 这个工具的人貌似也不少，后续再做了解。

ElementPlus 安装

命令行中输入：
npm install element-plus --save
即可完成Element Plus的安装工作

ElementPlus 配置

安装完成后，需要在入口文件main.ts中注入ElementPlus。

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import ElementPlus from 'element-plus'// 引入ElementPlus 组件
import 'element-plus/dist/index.css'// 引入ElementPlus 组件样式

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)// 注册组件到APP

app.mount('#app')

其实就是3行带注释的代码，其余的都是npm自动生成。。。