vue 3.0 + ant-design-vue 2.0(测试版)搭建项目

最近项目需要,使用vue.3.0 使用 vue-cli 4.5.4 以及 antd 2.0 搭建一个项目,antd 2.0 目前处于测试版,我把过程总结一下。
antd 2.0 的地址 :https://2x.antdv.com/components/radio-cn/
vue3.0 的地址: https://www.vue3js.cn/docs/zh/guide/migration/introduction.html#vue-cli

vue路由模式 :hash(#) history
vue-cli 得搭建:

vue-cli 命令方法跟以前有点区别,vue3.0 需要vue-cli 得版本在4.5以上才能支持,使用 npm 或者cnpm 安装都可以,为了安装速度,建议cnpm.
cnpm 安装方法,就不介绍了。 安装vue-cli得命令行为:

npm install -g @vue/cli@next

安装成功后,可以查看一下版本,命令行为

@vue/cli -V (大写V)

然后可以找一个磁盘,打开本地的cmd得命令框,使用 命令 :

vue create  <项目名字>  

创建一个项目,然后按照对应提示进行vue3.0的创建,如图:

在这里插入图片描述
在这里插入图片描述

装完之后,文件里面文件目录,如下:
在这里插入图片描述
文件相比之前稍微简化了很多。
然后根据需要安装需要的依赖,因为我们全局引入antd,所以我就直接cnpm 安装了 antd,less, less-loader, 按需引入的可以看文档,基本上差不多把,

npm i --save ant-design-vue@next
npm i --save less

cnpm 也是一样。

然后打开自己的vue项目进行一些配置。主要是main.js 入口文件:

在这里插入图片描述
之前配置的有问题,会老是报 antd 未定义的问题。
在这里插入图片描述
在这里插入图片描述
按需引入的话,
在这里插入图片描述
这里也需要注意一下,style:css 不是为 true.

增加默认创建项目,加入了js严格模式,eslint,导致有空格也会报错,解决方法如下
在这里插入图片描述
删除,重启即可。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值