一、为什么要用Ant Design

1、因为它是蚂蚁金服产出的一套牛逼哄哄的产品

2、丰富的组件化设计规范和组件化编码规范

3、它适用于企业级的中后台搭建

二、快速创建项目

1、安装脚手架

npm install -g @vue/cli

2、创建vue-cli项目 这里使用的是vue2

vue create antd-demo

3、安装ant design vue 注意3.x.x版本适用于Vue3 、2.x.x版本不推荐、1.7.8适用于Vue2

npm i --save ant-design-vue@1.7.8

4、引入

4-1：全部引入：

import Vue from "vue";

import Antd from "ant-design-vue";

import App from "./App.vue";

import "ant-design-vue/dist/antd.css"; // 样式

Vue.config.productionTip = false;

Vue.use(Antd);

new Vue({

render: (h) => h(App),

}).$mount("#app");

4-2：部分引入

import Vue from "vue";

import { Button } from "ant-design-vue";

import App from "./App.vue";

import "ant-design-vue/dist/antd.css";

Vue.config.productionTip = false;

Vue.use(Button);

new Vue({

render: (h) => h(App),

}).$mount("#app");

三、TS项目

vue create ant-demo-ts

第一个是VUE3 第二个是VUE2 要跑Typescript需要我们自定义插件

勾上TypeScript

是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

好东西，I do！

是否用babel做转译，当然要。

后面的自主选择即可。

[Ant Design Vue]Ant Design Vue搭建项目相关推荐

使用vue+webpack从零搭建项目
vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置.都知道,脚手架其实是vue结合 ...
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
Vue（八）vue 脚手架、脚手架创建项目示例
目录一.vue 脚手架 1. 脚手架搭建项目的步骤 2. 使用 vscode 打开并运行脚手架项目 3. 脚手架文件夹结构(同SPA 4部分) 4. 避免组件间样式冲突 5. 懒加载二.举例:使用 ...
运用 Vue CLI4.X 脚手架构建项目实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 运用 Vue CLI4.X 脚手架构建项目实战前言一.什么是 Vue CL ...
ant design vue 树形控件_官宣！vue.ant.design 低调上线
点击右上方,关注开源中国OSC头条号,获取最新技术资讯官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 Reac ...
官宣！vue.ant.design 低调上线
官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 React.Angular.Vue 三大前端框架,向着世界第一好 ...
Vue ant打包服务器-并配置【nginx子路径+linux环境】跨域解决+jenkins自动部署
1.起初害!最近把之前用JQ做的前端页面,换成了用vue写,所以再将vue项目放在服务器上运行时,就折腾了一下,稍微麻烦了点,索性就记录下把 2.环境 a.前端是用Vue Ant Design(版本 ...
vue项目结构php写哪里,Vue-cli搭建项目后目录结构的分析（图文）
这篇文章给大家介绍的文章内容是关于Vue-cli搭建项目后目录结构的分析,有很好的参考价值,希望可以帮助到有需要的朋友. 1.前言 Vue并不限制你的代码结构.但是,它规定了一些需要遵守的规则: 1. ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...

[Ant Design Vue]Ant Design Vue搭建项目

一、为什么要用Ant Design

二、快速创建项目

三、TS项目

[Ant Design Vue]Ant Design Vue搭建项目相关推荐

最新文章

热门文章