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”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！