如果文章有帮助到你,还请点个赞或留下评论

搭建脚手架

环境准备

  • nodeJS
  • vue-cli

如果没有安装点击此处查看安装方法

进入 vue ui

1、打开终端,输入命令

vue ui

2、选择项目存放位置 /Users/sw-code/Vue,根据自己需求

3、创建新建项目

  • 包管理器默认是npm
  • Git可以勾选,也可以之后再初始化

4、预设,选择手动

5、选择功能,根据自己需求选择

  • Choose Due version
  • Babel
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter:不建议初学者选择,代码格式化检验工具
  • 使用配置文件

6、配置

7、创建项目

  • 保证网络通畅的情况下应该没有问题

安装 ant-design-vue

图形化安装

选择安装的项目,选择项目依赖,点击右上角的安装依赖,搜索ant-design-vue,安装。

命令行安装

图形化界面可以关闭了,同时关闭终端,kill 进程

打开VS Code,将项目添加到工作区,新建终端,进入项目所在路径

输入命令

npm install ant-design-vue -S
  • 注意:一定要进入到项目所在路径!!

看到这个就说明安装成功

配置 ant-design-vue

查看 官方文档

全部引入

src/main.js中引入

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' Vue.use(Antd)

在页面中不再需要引入注册组件,可以直接使用所有的组件

<template>
<div>
<a-button type="primary">Hello ant-design-vue</a-button>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
</style>

部分引入

src/main.js中引入

import { Button } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' Vue.component(Button.name, Button)
// Vue.use(Button)

在项目中可以直接使用这个已经注册的组件

<template>
<div>
<a-button type="primary">Hello ant-design-vue</a-button>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
</style>

按需加载

ant-design-vue使用babel-plugin-import进行按需加载,安装babel-plugin-import插件

npm install babel-plugin-import -S

vue-cli 2

修改.babelrc文件,配置 babel-plugin-import

{
".....": [
.....
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
]
}

vue-cli 3

修改babel.config.js文件,配置 babel-plugin-import

module.exports = {
....: [
'.....'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
]
]
}

src目录下新建文件夹ant-design,并在其中新建文件index.js

import Vue from 'vue'
import {
Button,
message,
} from 'ant-design-vue' [Button]
.forEach(AntdComponent => Vue.use(AntdComponent)) Vue.prototype.$message = message

src/main.js中引入该文件

import './ant-design/index'

在项目中可以直接使用这个已经注册的组件

<template>
<div>
<a-button type="primary">Hello ant-design-vue</a-button>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
</style>

封装 axios

src/中创建utils,并在其中创建文件request.js

import axios from 'axios'

const request = axios.create({
baseURL: 'http://127.0.0.1:8001/eduservice/',
timeout: 5000
}) request.interceptors.request.use(
config => {
return config
},
error => {
console.log(error)
Promise.reject(error)
}
) request.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 20000) {
// message: '数据请求失败,请稍后重试!!!',
return Promise.reject(new Error('error'))
} else {
return response.data
}
},
error => {
// message: '网络连接失败,请重试!!!',
return Promise.reject(error)
}
) export default request

使用axios请求数据,在/src下创建文件夹api,并在其中创建文件login.js`

import request from '@/utils/request'

export function login (username, password) {
return request({
url: '/user/login',
method: 'post',
data: {
username,
password
}
})
}

持续更新中......

使用Vue-Cli搭建Ant Design Vue前端开发环境的更多相关文章

  1. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  2. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  4. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  5. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  6. grunt搭建自动化的web前端开发环境(转)

    1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了, ...

  7. 使用grunt搭建自动化的web前端开发环境

    使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...

  8. vue 下搭建ant design环境

    之前用ant-design-vue组件在vue页面下使用 一不小心就会出现编译错误,网上不是搭建教程都是不太准确,现整理下 1.根据ant design vue 官网的假定条件 已经安装了nodejs ...

  9. 创业类网站建设日志1——搭建服务器svn以及前端开发环境

    1.需要在linux环境的服务器下搭建node和npm还有Grunt,所以先需要一个叫putty的工具连接服务器命令行终端 2.双击putty工具,在HostName一栏输入项目服务器地址:172.1 ...

随机推荐

  1. MegaRAID BIOS设置阵列

    MegaRAID BIOS设置阵列 1.在初始界面可以看到physical View的界面,或者在左侧的菜单栏中点击选中即可,可以看到物理磁盘. 2.点击上一步的配置向导可以进入到配置向导界面 3.选 ...

  2. k8s滚动更新(8)

    一.k8s版本更新 滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 实践:部署 ...

  3. linux stat函数讲解 -(转自秋水Leo)

    stat函数讲解表头文件:    #include <sys/stat.h>             #include <unistd.h>定义函数:    int stat( ...

  4. 思考一个问题STM32的

    如果一个定时中断刚刚进入中断服务函数 但是服务函数执行时间太长   又一次触发了中断 会怎样

  5. STM8的AIR与STM32的Keil的指定地址存数据

    [经验分享]KE02在IAR和KEIL中以常量形式初始化EEPROM值一, 经验分享描述        写这篇经验分享的原因是,之前有一个客户,他希望在KE02的芯片中,不要出现使用EEPROM操作命 ...

  6. 记一次 .NET 某三甲医院HIS系统 内存暴涨分析

    一:背景 1. 讲故事 前几天有位朋友加wx说他的程序遭遇了内存暴涨,求助如何分析? 和这位朋友聊下来,这个dump也是取自一个HIS系统,如朋友所说我这真的是和医院杠上了,这样也好,给自己攒点资源, ...

  7. kotlin知识点

    主构造函数里的参数,如果不声明为var或者val,则这个参数一般是用来初始化父类.它不算是这个类的字段,它的作用域只在主构造函数当中. val 的对象不仅数据不能变, 引用也不能变. //自定义的类似 ...

  8. 4. springmvc底层原理2

    Spring mvc 是子容器 Spring 是 父容器 =================================================================== pub ...

  9. libevent中最小堆实现算法解析

    libevent,一个非常好的c的网络库,最近开始学习并分析下,做个记录.源码选用的1.4版本.因为感觉这版的代码比较精简,也没有太多宏定义,个人感觉适合学习原理. 从哪里开始呢,我选择从一些最简单的 ...

  10. C# 将DLL制作CAB包并在浏览器下载,自动安装。(Activex)(包括ie打开cab包一直弹出用户账户控制,确定之后无反应的解决办法。)

    制作Activex程序网上有很多方法我就不说了,我的业务主要做的就是将DLL打包成CAB供浏览器下载. 下面制作证书,以及制作cab包需要用到一些工具.我将工具包上传到自己的博客园里了,以供大家下载. ...