第一步源码 https://github.com/niuzhifeng616/ant-design-template
一、你需要电脑安装有
二、使用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-processorscss预处理器
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文件
}
}
};
到这里就新建好了！
