vue項目中怎么使用TDesign

這篇文章主要介紹“vue項目中怎么使用TDesign”，在日常操作中，相信很多人在vue項目中怎么使用TDesign問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue項目中怎么使用TDesign”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

前言：

tdesign-vue是TDesign 適配桌面端的組件庫，適合在 vue 2 技術棧項目中使用。當前只適配vue2.6.X如果版本高于vue2.7將報錯，因為vue2.6與vue2.7不兼容。

流程：

一、使用vue-cli手腳架創建vue項目

• 在待創建項目的文件夾下打開cmd輸入下列指令

• 項目名稱不能有中文-且英文字母都要求小寫錯誤案例：myVueAppName

vue create myvueappname

• vue版本選擇vue2

二、配置vue及vue模板編譯器版本

• 創建完項目后，在package.json或package-lock.json中查看vue的版本，如果vue的版本不是2.6.X，進入項目文件夾，打開cmd，使用以下命令修改vue版本。

npm install vue@2.6.14

• 然后更新模板編譯器vue-template-compiler的版本，使得vue和vue-template-compiler版本匹配。

npm install vue-template-compiler@2.6.14 --save-dev

三、安裝tdesign-vue和less

• tdesign-vue安裝使用下列命令

npm i tdesign-vue

如果安裝失敗，說明vue版本不匹配，需要更換vue版本。更換版本后可能導致之前的某些庫無法兼容，所以更換vue前記得備份。

對于不是新創建的vue項目（現有項目）有時候會出現package.json文件中vue版本是2.6但實際版本是2.7的情況，可以通過查看node_modules\vue\package.json的version確定實際安裝的版本。

• less是一種css預處理器，tdesign的css樣式使用less，但vue項目不自帶less包，所以需要額外安裝，安裝使用下列命令

npm install less-loader

四、測試

• 安裝完畢在main.js中全局引入tdesign（目的是測試較為復雜的組件，為簡化操作使用全局引入，后續開發可改為按需引入）。

import Vue from 'vue';
import TDesign from 'tdesign-vue';
import 'tdesign-vue/es/style/index.css';// 引入組件庫的少量全局樣式變量

Vue.use(TDesign);

完整main.js代碼

• 在組件文件夾創建測試組件，組件文件命名采用駝峰命名法，否則可能報錯。
  駝峰命名法：至少由2組單詞組成且每個單詞首字母大寫例如：TextBox、MyAppToolBox、Bottom21
  錯誤示范：textinput、myappbar
  如果不想使用此校驗，在在vue.config.js的defineConfig中添加規則lintOnSave:false

測試組件：頂部導航欄，使用TDesign官網給出的源碼示例

• 在App.vue中引入該組件

App.js完整代碼-僅作參考

• 運行vue項目查看是否報錯

npm run serve

常見錯誤

• vue模板編譯器版本與vue版本不匹配

 Vue packages version mismatch:

        - vue@2.6.14 (D:\VUE_projects\rg813pc\node_modules\vue\dist\vue.runtime.common.js)
        - vue-template-compiler@2.7.14 (D:\VUE_projects\rg813pc\node_modules\vue-template-compiler\package.json)

        This may cause things to work incorrectly. Make sure to use the same version for both.
        If you are using vue-loader@>=10.0, simply update vue-template-compiler.
        If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

• vue版本高于vue2.6

[vue warn]: inject() can only be used inside setup()

• 組件文件名未使用駝峰命名法

Component name “xxx“ should always be multi-word vue/multi-word-component-names

• less的less-load模塊未安裝

Module not found: Error: Can't resolve 'less-loader' in xxx

到此，關于“vue項目中怎么使用TDesign”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！