download：内置文档2022全面升级Vue3 + TS 仿知乎专栏企业级项目完结无密
VUE3.2前端开发系列一(环境建设)
安装路径建议D:/vscode/
安装完成后，重启计算机并自动添加环境变量path。
膨胀装置
中文插件:visual studio代码的简体中文(简体中文)语言包
Vue3插件:Vue语言特性(Volar)
Vue2插件:Vetur已禁用
3-npm设置
设置全局安装包目录:
npm配置集前缀" D:\nodejs\node_global "
npm配置集缓存" D:\nodejs\node_cache "
3-1-设置淘宝镜像
npm配置集注册表https://registry.npm.taobao.org-全局
npm配置集分布https://npm.taobao.org/dist-全局
4-安装vit3并创建Vite+Vue+Element-plus项目
4-1-vite 3的全局安装(-g表示全局安装)
npm安装create-vite@3.0.0 -g
4-2-Vite3创建项目
Npcreatevite @ latest enter
？项目名称:vite-project输入项目文件夹名称示例:my-vite-app enter
选择Vue回车。
选择类型脚本回车。
等待项目创建完成。
4-3-依次输入命令。
my-viye-app//转到项目文件夹
Npm安装//安装依赖包
Npm运行开发//启动项目
Ctrl+c停止项目
4-4-安装Element-plus+可视化表单Vfrom3
npinstallelement-plus-save//-s等价于-save:同时写入package.json文件。
m install @ element-plus/icons-vue//安装element-plus图标。
注意:VForm依赖于Element UI，所以需要先安装Element-plus。
m安装v form-buildings//安装可视化表单Vfrom3
4-5-引入元素-全部加
介绍原SRC下main.js文件的内容
//main.s文件
从“vue”导入{ createApp }
“导入”。/style.css ’
从’导入应用程序。/App.vue ’
createApp(应用程序)。挂载(#app)
介绍完整的element-plus+隐藏类-icon icon+可视化表单Vfrom3
//main.s文件
从“vue”导入{ createApp }
从’导入应用程序。/App.vue ’
从“element-plus”//引入element-plus导入plus。
import ’ element-plus/dist/index . CSS '//引入element-plus样式。
import ’ element-plus/theme-challenge/display . CSS ‘//引入网格布局自动隐藏类。
从’ @ element-plus/icons-vue '//import element-plus图标库中导入*作为element plusiconsvue。
从“vform-buildings”导入VForm/介绍v form库
导入’ VForm-buildings/dist/v form designer . CSS ‘//引入v form样式
从’ v form-buildings/dist/VFormRender . UMD . min . js ‘//导入v form render组件
导入’ vform-buildings/dist/v form render . CSS '//引入v form渲染风格。
Const app = createApp(App) //覆盖createApp(App)。挂载(#app)方法
//全局注册element-plus图标库
for(object . entries(ElementPlusIconsVue)的const [key，component]){
app.component(键，组件)
}
App.use(ElementPlus) //全局注册ElementPlus
Vue.use(VForm) //全局注册VForm
Vue.use(VFormRender) //全局注册VFormRender等组件。
app . mount(# app)
在tsconfig.json文件中添加Volar支持(vue3语法插件)
// tsconfig.json文件
{
“编译器选项”:{
“目标”:" ESNext “，
“useDefineForClassFields”:真，
“模块”:” ESNext “，
" moduleResolution “:“节点”，
“严格”:真的，
" jsx “:“保存”，
“sourceMap”:没错，
" resolveJsonModule”: true，
“isolatedModules”:真，
“esModuleInterop”:对，
" lib”: [“ESNext “，” DOM”]，
“skipLibCheck”:真的，
//添加Volar支持(vue3语法插件)
“类型”:[
“元素加/全局”
]
},
" include”: [“src//*。ts “，” src//.d.ts “，” src/**/。tsx “，” src/**/*。vue”]，
" references": [{ “path “:”。/tsconfig.node.json” }]
}
4-6-按需导入元素加
注意:如果需要可视化表单Vfrom3，不要按要求引入element-plus。
安装两个插件:拔出vue组件和拔出自动导入。
NPM install-D unplugin-vue-组件unplugin-自动导入
将以下代码插入到Vite配置文件中
//vite.config.ts文件
从“vite”导入{ defineConfig }
从’ @vitejs/plugin-vue '导入vue
//自动导入ElementPlus
从“拔出-自动导入/邀请”导入自动导入
从“unplugin-vue-components/vite”导入组件
从“unplugin-vue-components/resolver”导入{ ElementPlusResolver }
导出默认定义配置({
插件:[
vue()，
//自动导入ElementPlus
自动导入({
解析器:[ElementPlusResolver()]，
}),
//自动导入ElementPlus
组件({
解析器:[ElementPlusResolver()]，
}),
],
//主机0.0.0.0表示所有主机都可以访问。
服务器:{
主持人:“0.0.0.0”
}
})
按需导入element-plus main.ts文件。
复制
//main.ts文件
从“vue”导入{ createApp }
从’导入应用程序。/App.vue ’
import ’ element-plus/theme-challenge/display . CSS ‘//引入网格布局自动隐藏类。
从’ @ element-plus/icons-vue '//import element-plus图标库中导入*作为element plusiconsvue。
Const app = createApp(App) //覆盖createApp(App)。挂载(#app)方法
//全局注册element-plus图标库
for(object . entries(ElementPlusIconsVue)的const [key，component]){
app.component(键，组件)
}
app . mount(# app)