使用Vue-Cli搭建Ant Design Vue前端开发环境

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

搭建脚手架

环境准备

• 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
    }
  })
}

持续更新中......