Vue+Ant Design 搭建后台管理系统(一)本章就说到这里，下一章就是建项目的基础架子，架子稳了干活才稳。

前言

最近在开发后台管理项目，一开始打算用别人的，到后来还是自己动手写一个。写这篇文章是为了记录自己开发过程中的经历和总结。需要提前安装(Node, Npm, Vue Cli3), 提前了解(Vue, Vue Router, Vuex, Ant Design Vue, ES6)

创建项目

通过vue ui命令打开图形化界面

预设(我这里选手动配置)
功能(选择预安装的依赖)
配置(项目的代码配置)
安装成功

6.运行看一下

到这里已经安装好了，接下来就开始配置项目了。

配置项目

1.安装依赖(根据需要安装相应依赖)

直接看官方教程如何引入ant-design-vue

2.配置按需加载 (得先安装 babel-plugin-import)

要保证如下几个配置。

// babel.config.js
plugins: [
	[
		'import',
		{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
	]
]

// main.js
import { Button } from 'ant-design-vue'
Vue.use(Button)	// 全局注册需要用到的组件

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: { javascriptEnabled: true }
    }
  }
}

页面上有Button按钮就说明配置成功！可以进行下一步了

3.整理项目文件夹

|-- manage
    |-- .editorconfig
    |-- .gitignore
    |-- package-lock.json
    |-- babel.config.js
    |-- vue.config.js
    |-- package.json
    |-- README.md
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src
        |-- api // 接口
        |-- assets // 静态资源
            |-- logo.png
        |-- components // 组件
        |-- config // 项目配置
        |-- layout // 布局
        |-- mock // 模拟数据
        |-- router // 路由
            |-- router.js
        |-- store // vuex
            |-- store.js
        |-- utils // 工具
        |-- views // 页面
            |-- Home.vue
        |-- App.vue
        |-- main.js

再把所需依赖先安装好

// package.js
"dependencies": {
	"vue": "^2.6.10",
	"vue-router": "^3.0.3",
	"vuex": "^3.0.1",
	"axios": "^0.18.0",
	"ant-design-vue": "^1.3.10",
	"core-js": "^2.6.5",
	"nprogress": "^0.2.0",
	"moment": "^2.24.0",
	"vue-ls": "^3.2.0"
},
"devDependencies": {
	"@vue/cli-plugin-babel": "^3.8.0",
	"@vue/cli-plugin-eslint": "^3.8.0",
	"@vue/cli-service": "^3.8.0",
	"@vue/eslint-config-standard": "^4.0.0",
	"babel-eslint": "^10.0.1",
	"babel-plugin-import": "^1.12.0",
	"eslint": "^5.16.0",
	"eslint-plugin-vue": "^5.0.0",
	"less": "^3.0.4",
	"less-loader": "^4.1.0",
	"vue-template-compiler": "^2.6.10",
	"mockjs": "^1.0.1-beta3"
}

本章就说到这里，下一章就是建项目的基础架子，架子稳了干活才稳。

第一次发文章有点紧张，不好的地方还望指出。