vue项目中怎么使用TDesign

这篇文章主要介绍“vue项目中怎么使用TDesign”，在日常操作中，相信很多人在vue项目中怎么使用TDesign问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue项目中怎么使用TDesign”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

前言：

tdesign-vue

流程：

一、使用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_modulesvuepackage.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
g813pc
ode_modulesvuedistvue.runtime.common.js)
        - vue-template-compiler@2.7.14 (D:VUE_projects
g813pc
ode_modulesvue-template-compilerpackage.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