1、創(chuàng)建vue3項(xiàng)目搭建

vue3官網(wǎng) vue3官網(wǎng)
vite vite官網(wǎng)連接

npm 安裝

// 創(chuàng)建項(xiàng)目
npm create vite@latest
? Project name: vue3_vite_project // 輸入項(xiàng)目名稱(chēng)

按照提示輸出即可！

2、安裝less、scss

vite 中使用 less 或 scss
安裝后在style 中設(shè)置對(duì)應(yīng)的 scss 或 less，推薦scss編譯

安裝less依賴(lài)

npm add -D less

安裝sass依賴(lài)

npm add -D sass

3、vite自動(dòng)導(dǎo)入語(yǔ)法插件

推薦使用插件，vite.config.js配置；
unplugin-vue-components // 自動(dòng)導(dǎo)入vue中hook reactive ref等AIP；
unplugin-auto-import // 自動(dòng)導(dǎo)入ui-組件 比如說(shuō)ant-design-vue element-plus等；

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

無(wú)需引入直接訪問(wèn)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自動(dòng)導(dǎo)入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自動(dòng)導(dǎo)入ui-組件 比如說(shuō)ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //安裝兩行后你會(huì)發(fā)現(xiàn)在組件中不用再導(dǎo)入ref，reactive等
			imports: ['vue', 'vue-router'],
      //存放的位置
      dts: "src/auto-import.d.ts",
    }),
    Components({
      // 引入組件的,包括自定義組件
      // 存放的位置
      // dts: "src/components.d.ts"
    })
  ],
})

4、安裝router

vue-router官網(wǎng) vue-router官網(wǎng)

npm 安裝

npm install vue-router@4

安裝成功后在main.ts 引入 router
使用ts出現(xiàn)找不到模塊的問(wèn)題！

這個(gè)時(shí)候我們需要找到文件根目錄中的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沒(méi)有pinia優(yōu)雅
pinia 官網(wǎng) pinia官網(wǎng)

npm 安裝

npm install pinia

6、搭建后臺(tái)系統(tǒng)–基本配置layout頁(yè)面的搭建

1、下載element-ui-plus npm install element-plus --save
下載element icon 這個(gè)路由左側(cè)的icon會(huì)用到 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有一些坑，我們?nèi)绾谓鉀Q遺留的問(wèn)題，請(qǐng)看下面示例：

解決方案1：

// 這里要注意 getCurrentInstance 模塊導(dǎo)入
  import { reactive, getCurrentInstance } from 'vue';

const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
console.log(appContext,'globalProxy')
// 通過(guò)appContext.config.globalProperties調(diào)用獲取
// 這樣使用 即使打包發(fā)布也不會(huì)出現(xiàn)問(wèn)題

解決方案2：

const { proxy } = getCurrentInstance()
console.log(proxy.$utlis.getHint(),'首頁(yè)')
console.log(proxy,'proxy')
// 獲取掛載在全局的方法
// 這樣使用 即使打包發(fā)布也不會(huì)出現(xiàn)問(wèn)題

** 4、引入element-ui**

5、搭建菜單組件

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

到這里框架搭建已經(jīng)完成

預(yù)覽項(xiàng)目：預(yù)覽項(xiàng)目

總結(jié)：

前端路上 | 所知甚少，唯善學(xué)。
各位小伙伴有什么疑問(wèn)，歡迎留言探討。

— 關(guān)注我：前端路上不迷路 —文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-551700.html

到了這里，關(guān)于vue3 + vite + ts + element-ui搭建后臺(tái)管理框架的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！