600字范文 > vue3 + vite + ts + element-ui搭建后台管理框架

vue3 + vite + ts + element-ui搭建后台管理框架

时间：2022-09-05 07:05:32

1、创建vue3项目搭建2、安装less、scss3、vite自动导入语法插件4、安装router5、安装pinia6、搭建后台系统--基本配置layout页面的搭建总结：

1、创建vue3项目搭建

vue3官网 vue3官网
vite vite官网连接

npm 安装

// 创建项目npm create vite@latest? Project name: vue3_vite_project // 输入项目名称

按照提示输出即可！

2、安装less、scss

vite 中使用 less 或 scss
安装后在style 中设置对应的 scss 或 less，推荐scss编译

安装less依赖

npm add -D less

安装sass依赖

npm add -D sass

3、vite自动导入语法插件

推荐使用插件，vite.config.js配置；
unplugin-vue-components // 自动导入vue中hook reactive ref等AIP；
unplugin-auto-import // 自动导入ui-组件比如说ant-design-vue element-plus等；

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

无需引入直接访问

import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// 自动导入vue中hook reactive ref等import AutoImport from "unplugin-auto-import/vite"//自动导入ui-组件比如说ant-design-vue element-plus等import Components from 'unplugin-vue-components/vite';// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),AutoImport({//安装两行后你会发现在组件中不用再导入ref，reactive等imports: ['vue', 'vue-router'],//存放的位置dts: "src/auto-import.d.ts",}),Components({// 引入组件的,包括自定义组件// 存放的位置// dts: "src/components.d.ts"})],})

4、安装router

vue-router官网 vue-router官网

npm 安装

npm install vue-router@4

安装成功后在main.ts 引入 router
使用ts出现找不到模块的问题！

这个时候我们需要找到文件根目录中的vite-env.d.ts文件中加入几行代码!

// 在文件中加上declare module '*.vue' {import type {DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component}// 或者declare module '*.vue' {import type {DefineComponent } from 'vue'const component: ComponentOptions | ComponentOptions['setup']export default component}

5、安装pinia

vue3+ts使用pinia更好用，vuex使用ts没有pinia优雅
pinia 官网 pinia官网

npm 安装

npm install pinia

6、搭建后台系统–基本配置layout页面的搭建

1、下载element-ui-plusnpm install element-plus --save
下载element icon 这个路由左侧的icon会用到npm install @element-plus/icons-vue
2、封装公共js方法
3、将公共js挂载全局
4、引入element-ui
5、搭建菜单组件

1、element-ui-plus的使用

2、封装公共js方法

3、将公共js挂载全局

这里需要注意的是，使用app.config.globalProperties有一些坑，我们如何解决遗留的问题，请看下面示例：

解决方案1：

// 这里要注意 getCurrentInstance 模块导入import {reactive, getCurrentInstance } from 'vue';

const {appContext } = getCurrentInstance();const globalProxy = appContext.config.globalProperties;console.log(appContext,'globalProxy')// 通过appContext.config.globalProperties调用获取// 这样使用即使打包发布也不会出现问题

解决方案2：

const {proxy } = getCurrentInstance()console.log(proxy.$utlis.getHint(),'首页')console.log(proxy,'proxy')// 获取挂载在全局的方法// 这样使用即使打包发布也不会出现问题

** 4、引入element-ui**

5、搭建菜单组件

最后展示一下搭建的成品模块：