前言：

本文只介紹如何在vue項目中配置TDesign，不涉及vue項目的創(chuàng)建

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

流程：

一、使用vue-cli手腳架創(chuàng)建vue項目

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

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

vue create myvueappname

• vue版本選擇vue2

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

• 創(chuàng)建完項目后，在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前記得備份。

對于不是新創(chuàng)建的vue項目（現(xiàn)有項目）有時候會出現(xiàn)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（目的是測試較為復雜的組件，為簡化操作使用全局引入，后續(xù)開發(fā)可改為按需引入）。

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

Vue.use(TDesign);

完整main.js代碼（僅作參考，需按自己的情況修改）

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

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

• 在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的文章就介紹到這了,更多相關vue使用TDesign內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！