vue项目中使用TDesign的方法

前言：

本文只介绍如何在vue项目中配置TDesign，不涉及vue项目的创建

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的文章就介绍到这了,更多相关vue使用TDesign内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！