1-nodejs安装
下载地址：
https://nodejs.org/dist/v16.17.0/node-v16.17.0-x64.msi
安装路径建议 D:/nodejs/
注：D:/nodejs/ 路径下划分npm，pnpm，yarn 等
2-VSCode安装
下载地址：
安装路径建议 D:/VueWork/vscode/
安装完后重启电脑，自动加入环境变量path
扩展安装
汉化插件：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
vue3插件：Vue Language Features (Volar)
vue2插件：Vetur 禁用
3-npm设置
设置全局的安装包目录：
npm config set prefix "D:\nodejs\npm\node_global"
npm config set cache "D:\nodejs\npm\node_cache"
设置淘宝镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
注：关于npm命令无输出信息或空白的解决方法
删除C:\Users\{账户}\下的.npmrc文件
尤其是设置完全局安装包目录后，npm命令失效请删除上述.npmrc文件
一般情况下npm命令失效请优先考虑删除上述.npmrc文件
3-1-pnpm设置
使用独立脚本安装pnpm 即使没有安装 node.js，也可以使用以下脚本安装 pnpm。
Windows 使用 PowerShell
安装命令 iwr https://get.pnpm.io/install.ps1 -useb | iex
安装完成后环境变量中已被自动添加了 PNPM_HOME 环境变量，默认值是：C:\Users\ASUS\AppData\Local\pnpm 将该值修改为：D:\nodejs\pnpm 然后再将 C:\Users\ASUS\AppData\Local\pnpm文件夹 剪切到 D:\nodejs\ 文件夹中
配置淘宝镜像
pnpm config set registry https://registry.npm.taobao.org/
检查淘宝镜像配置
pnpm config get registry
配置 store-dir、state-dir、global-dir、global-bin-dir、cache-dir
pnpm config set store-dir D:\nodejs\pnpm\.pnpm-store
pnpm config set state-dir D:\nodejs\pnpm\state
pnpm config set global-dir D:\nodejs\pnpm\store
pnpm config set global-bin-dir D:\nodejs\pnpm
pnpm config set cache-dir D:\nodejs\pnpm\cache
备注pnpm常用命令简介
查看element-plus的所有版本 pnpm view element-plus versions
pnpm install element-plus 等价与 npm install element-plus --save
npm i 等价与 pnpm i
查看依赖 pnpm list
启动项目 pnpm dev 喜欢npm的可以用 pnpm run dev
4-安装vit3及创建Vite+Vue+Element-plus项目
4-1-全局安装vite3（ -g 表示全局安装 ）
npm install create-vite@3.0.0 -g
4-2-Vite3创建项目
npm create vite@latest 回车
? Project name: » vite-project 输入项目文件夹名称 例：my-vite-app 回车
选择 Vue 回车
选择 TypeSc'ript 回车
等待创建项目完成
4-3-依次输入命令
cd my-viye-app //进入项目文件夹
npm install //安装依赖包
npm run dev //启动项目
快捷键 Ctrl+c 停止项目
4-4-安装Element-plus+可视化表单Vfrom3
npm install element-plus --save //-S等同于--save：同时写入package.json文件
npm install @element-plus/icons-vue //安装element-plus icon图标
注意：VForm依赖Element UI，需要先安装Element-plus
npm install vform-builds //安装可视化表单Vfrom3
4-5-完整引入Element-plus
引入前SRC下main.js文件内容
//main.s文件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')完整引入element-plus+隐藏类-icon图标+可视化表单Vfrom3
//main.s文件
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' //引入element-plus
import 'element-plus/dist/index.css' //引入element-plus样式
import 'element-plus/theme-chalk/display.css' //引入栅格布局自动隐藏类
import * as ElementPlusIconsVue from '@element-plus/icons-vue' //引入element-plus图标库
import VForm from 'vform-builds' //引入VForm库
import 'vform-builds/dist/VFormDesigner.css' //引入VForm样式
import VFormRender from 'vform-builds/dist/VFormRender.umd.min.js' //引入VFormRender组件
import 'vform-builds/dist/VFormRender.css' //引入VFormRender样式
const app = createApp(App) //改写createApp(App).mount('#app')方式
//全局注册element-plus图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus) //全局注册ElementPlus
Vue.use(VForm) //全局注册VForm
Vue.use(VFormRender) //全局注册VFormRender等组件
app.mount('#app')在tsconfig.json文件增加Volar支持（vue3语法插件）
// tsconfig.json文件
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
//增加Volar支持（vue3语法插件）
"types": [
"element-plus/global"
]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}4-6-按需导入Element-plus
注：需要可视化表单Vfrom3，则不要按需引入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 vue from '@vitejs/plugin-vue'
// 自动导入ElementPlus
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: [
vue(),
// 自动导入ElementPlus
AutoImport({
resolvers: [ElementPlusResolver()],
}),
// 自动导入ElementPlus
Components({
resolvers: [ElementPlusResolver()],
}),
],
//host 0.0.0.0 表示所有主机都可访问
server: {
host: "0.0.0.0"
}
})按需导入element-plus main.ts文件
//main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/theme-chalk/display.css' //引入栅格布局自动隐藏类
import * as ElementPlusIconsVue from '@element-plus/icons-vue' //引入element-plus图标库
const app = createApp(App) //改写createApp(App).mount('#app')方式
//全局注册element-plus图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')5-资料扩展
Element-plus 官方网站
https://element-plus.gitee.io/zh-CN/guide/design.html
可视化表单Vfrom3 官方网站
