新建vue项目和安装第三方库

安装vue

打开vscode编辑器，按Ctrl+`组合键打开终端，在命令行中运行以下命令

npm create vue@latest

项目初始化完成，可执行以下命令：

cd vue-project --切换到项目目录
npm install   -- 安装依赖包
npm run dev  -- 运行项目

安装sass

npm install -D sass

安装axios

npm install axios

安装 Element Plus

npm install element-plus --save

自动导入Element Plus组件，首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 配置文件中

// 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()],
    }),
  ],
})

  添加此插件后，启动开发服务器(通常为 npm run dev )以生成 “auto-imports.d.ts”, “components.d.ts”,类型的第一个版本，该版本应与 “types”: [“element-plus/global”,]一起添加到 tsconfig.app.json 。它应该是这样的:

// tsconfig.app.json
  "include": [
  "auto-imports.d.ts",
  "components.d.ts",
],
 "types": [
   "element-plus/global",
]

安装Element Plus 提供的一套常用的图标集合：

npm install @element-plus/icons-vue

注册所有图标

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   
  app.component(key, component)
}

按需注册图标

// main.ts
import {
    HomeFilled, Platform} from '@element-plus/icons-vue'
const app = createApp(App)
app.component('HomeFilled', HomeFilled)
.component('Platform', Platform)

安装unplugin-icons和iconify最全的图标库

点击这里在线寻找满意的图标