2022-04-07【技术】关于腾讯TDesign框架的研究（使用篇）

2022-04-07【技术】关于腾讯TDesign框架的研究（使用篇）
官方地址：https://tdesign.tencent.com/vue/quick-start
1.1 脚手架的搭建
安装命令

npm  i tdesign-starter-cli@latest -g

具体安装的话，在本机打开cmd

image.png

在cmd中复制上述命令

image.png

npm包一般安装的时候不报错就算成功了

安装完成

1.2 创建安装目录

安装工程之前我们先需要在本机新建一个目录用来放置我们的程序。
然后在cmd中将目录切换到当前位置。

1.3 初始化工程

在cmd中输入如下命令

td-starter init

image.png

注意：此处不要使用cnpm install来安装依赖，否则会出现：
报错：vue-template-compiler版本不匹配
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.

解决方法：
分别执行以下：
1、卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g
2.npm install @vue/cli –g
不指定版本号会默认安装最新的版本。
然后执行npm run dev即可。
如果还报错，就直接删除node_modules文件夹，重新老老实实的使用npm install吧。

image.png

依赖安装成功

image.png

自动打开项目：

image.png