vue初始化项目结构,并引入ant-design

前提:node已经安装好
npm install cnpm -g 安装淘宝镜像【npm可能速度不快,所以可以使用cnpm来替代】
cnpm install vue 安装vue
cnpm install --global vue-cli 安装vue-cli

初始化项目结构
vue init webpack vue-project
在这里插入图片描述
下面的操作可以一直回车默认,如果你代码规范要求比较严格,可以打开ESLint【y】,自己搞的项目选【n】
? Project name vue-project
? Project description A Vue.js project
? Author 邮箱地址 <邮箱地址>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run npm install for you after the project has been created? (recommended) npm

在这里插入图片描述
安装启动:
cd vue-project
cnpm install
cnpm run dev

在这里插入图片描述
成功访问地址:http://localhost:8080/#/
在这里插入图片描述
下面介绍引入蚂蚁Ant-Design组件库使用
官方文档:https://www.antdv.com/docs/vue/introduce-cn/
先安装ant-design-vue模块,【cnpm 也一样】
npm install ant-design-vue --save
或者
cnpm install ant-design-vue --save
在这里插入图片描述
安装好后,按需加载【推荐】
{
“plugins”: [
[“import”, { “libraryName”: “ant-design-vue”, “libraryDirectory”: “es”, “style”: “css” }] // style: true 会加载 less 文件
]
}
在这里插入图片描述
如果有解析.babelrc错误,先执行cnpm i babel-plugin-import --save-dev 安装babel插件
在这里插入图片描述
在这里插入图片描述
引入一个按钮组件
在这里插入图片描述
启动后界面显示ant-design默认风格的按钮-【primary】
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值