登录
登录 注册新账号
注册
已有账号登录
2022全面升级Vue3 + TS 仿知乎专栏企业级项目完结无密内置文档
王之 阅读 164 次
9月23日发布

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-vite3.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)