使用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
    }
  })
}

持續更新中......