vite搭建后台管理系统（vue@3 + ts + vite + pnpm + element-plus ）

pnpm

介绍

performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”

安装

npm i pnpm -g

注： 安装失败可能与node版本有关，可升级到16+以上

查看版本信息

安装项目依赖

安装依赖包到 dependencies ：pnpm add <pkg>

安装依赖包到devDependencies：pnpm add -D <pkg>

安装依赖包到optionalDependencies：pnpm add -O <pkg>

全局安装依赖包：pnpm add -g xxx

安装项目全部依赖：pnpm install，别名pnpm i

更新依赖包：pnpm update，别名pnpm up

删除依赖包：pnpm remove，别名pnpm rm/uninstall/un

运行项目

pnpm run dev

升级版本

pnpm add -g pnpm to update 

设置源

pnpm config get registry //查看源
pnpm config set registry https://registry.npmmirror.com //切换淘宝源 

vite

介绍

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”) 是一种新型前端构建工具，能够显著提升前端开发体验（热更新、打包构建速度更快）。

运行创建项目命令

# 使用 npm
npm create vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
pnpm create vite // 可在末尾加项目名

注：Vite 需要 Node.js 版本 >= 12.0.0

选择前端框架， vue

选择项目类型，ts

创建完毕

根据cmd提示，启动项目

安装Element Plus

# npm
npm install element-plus --save
# yarn
yarn add element-plus
# pnpm
pnpm install element-plus

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需引入

需使用额外的插件来导入要使用的组件

自动导入（推荐）

1. List item

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

pnpm add -D unplugin-vue-components unplugin-auto-import

2. 修改vite.config.ts文件

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

手动导入

需安装 unplugin-element-plus 来导入样式

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

注：如果使用 unplugin-element-plus 并且只使用组件 API，你需要手动导入样式。例：

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'