前言：

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

tdesign-vue是TDesign 適配桌面端的組件庫(kù)，適合在 vue 2 技術(shù)棧項(xiàng)目中使用。當(dāng)前只適配vue2.6.X如果版本高于vue2.7將報(bào)錯(cuò)，因?yàn)関ue2.6與vue2.7不兼容。

流程：

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

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

• 項(xiàng)目名稱不能有中文-且英文字母都要求小寫(xiě)錯(cuò)誤案例：myVueAppName

vue create myvueappname

• vue版本選擇vue2

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

• 創(chuàng)建完項(xiàng)目后，在package.json或package-lock.json中查看vue的版本，如果vue的版本不是2.6.X，進(jìn)入項(xiàng)目文件夾，打開(kāi)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

如果安裝失敗，說(shuō)明vue版本不匹配，需要更換vue版本。更換版本后可能導(dǎo)致之前的某些庫(kù)無(wú)法兼容，所以更換vue前記得備份。

對(duì)于不是新創(chuàng)建的vue項(xiàng)目（現(xiàn)有項(xiàng)目）有時(shí)候會(huì)出現(xiàn)package.json文件中vue版本是2.6但實(shí)際版本是2.7的情況，可以通過(guò)查看node_modules\vue\package.json的version確定實(shí)際安裝的版本。

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

npm install less-loader

四、測(cè)試

• 安裝完畢在main.js中全局引入tdesign（目的是測(cè)試較為復(fù)雜的組件，為簡(jiǎn)化操作使用全局引入，后續(xù)開(kāi)發(fā)可改為按需引入）。

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

Vue.use(TDesign);

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

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

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

• 在App.vue中引入該組件

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

• 運(yùn)行vue項(xiàng)目查看是否報(bào)錯(cuò)

npm run serve

常見(jiàn)錯(cuò)誤

• 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

到此這篇關(guān)于vue項(xiàng)目中使用TDesign的文章就介紹到這了,更多相關(guān)vue使用TDesign內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論