第一步，如何新建一个vue-cli3 + ant-design

第一步源码 https://github.com/niuzhifeng616/ant-design-template

一、你需要电脑安装有

1.node
2.vue-cli 3

二、使用vue-cli3新建一个空的工程

新建vue-cli3项目有两种方式
vue create name
vue ui
我们以vue create name方式创建 （选择自定义方式）

72220BC6-62DA-49F5-9C47-1306C9CC5F66.png

Babel 是一个 JavaScript 编译器
TypeScript 有兴趣自己看，我们这里用的JavaScript
Progressive Web App (PWA) Support 这里我们是一个中后台项目模板，不需要PWA
Router 路由
Vuex 状态管理工具
CSS Pre-processors css预处理器
Linter / Formatter 在编辑器中报告检测到的错误和警告
Unit Testing 单元测试
E2E Testing 端到端测试

接下来回车

1809A188-3926-4B55-BB2F-C0B885E23FF9.png

询问路由是否使用history模式
我们选择 Y 回车

020BD969-2EF8-49C8-A462-F2F1800B53C2.png

选择一种预处理器 我们这里选择 less 原因之一是ant-design-vue 使用的是less

E57DB73D-97EE-4AC6-9F0E-9B4944790A16.png

这里我们选择ESLint + Prettier

87844A9E-8FDC-4538-9BB9-AF51467BD08B.png

保存时
提交代码时
这两个我们都需要

365BEEFF-BBF0-412F-8D5E-CEC190890035.png

测试运行器 这里我们选择 Jest

9AECD9B7-F002-4767-B64F-A6435D4126B4.png

配置文件都是单独的文件
放到一个文件里package.json
我们选第一个

后面的就无所谓了，然后就可以新建出一个工程了！

附上命令行

MacBook-Pro:template ushishipou$ vue create name
Vue CLI v4.0.5
┌─────────────────────────────────────────────┐
│                                             │
│     New version available 4.0.5 → 4.2.3     │
│   Run yarn global add @vue/cli to update!   │
│                                             │
└─────────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel,
 Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper serv
er setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer an
d CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint 
and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, Post
CSS, ESLint, etc.? In dedicated config files

三、安装ant-design-vue

进入项目目录

yarn add ant-design-vue moment
yarn install //安装依赖

moment 是时间的一个插件

到这里，一个空的新工程就配置好了

四、自定义webpack，配置babel

main.js

import Vue from "vue";
import { Button } from "ant-design-vue"; // 按需引入 ant-design-vue 组件
import App from "./App.vue";
import router from "./router";
import store from "./store";

/*
  注册引入的组件
*/
Vue.use(Button);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

这里没有引入 ant-design-vue 样式文件
我们在 babel 中配置引入的样式文件

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ] // `style: true` 会加载 less 文件
  ]
};

这里需要安装 babel-plugin-import

vue.config.js （需要自己在根目录下创建这个文件）

module.exports = {
  css: {
    loaderOptions: {
      less: { javascriptEnabled: true } // 开启后 antd 样式 可以引用.less文件
    }
  }
};

到这里就新建好了！

第一步源码 https://github.com/niuzhifeng616/ant-design-template