第一步源碼 https://github.com/niuzhifeng616/ant-design-template
一益咬、你需要電腦安裝有
二裳仆、使用vue-cli3新建一個空的工程
新建vue-cli3項(xiàng)目有兩種方式
vue create name
vue ui
我們以vue create name方式創(chuàng)建 （選擇自定義方式）
Babel 是一個 JavaScript 編譯器
TypeScript有興趣自己看蟋字，我們這里用的JavaScript
Progressive Web App (PWA) Support這里我們是一個中后臺項(xiàng)目模板顶猜，不需要PWA
Router路由
Vuex狀態(tài)管理工具
CSS Pre-processorscss預(yù)處理器
Linter / Formatter在編輯器中報告檢測到的錯誤和警告
Unit Testing單元測試
E2E Testing端到端測試
接下來回車
詢問路由是否使用history模式
我們選擇 Y 回車
選擇一種預(yù)處理器 我們這里選擇
less原因之一是ant-design-vue使用的是less
這里我們選擇
ESLint + Prettier
保存時
提交代碼時
這兩個我們都需要
測試運(yùn)行器 這里我們選擇
Jest
配置文件都是單獨(dú)的文件
放到一個文件里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
進(jìn)入項(xiàng)目目錄
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 （需要自己在根目錄下創(chuàng)建這個文件）
module.exports = {
css: {
loaderOptions: {
less: { javascriptEnabled: true } // 開啟后 antd 樣式 可以引用.less文件
}
}
};
到這里就新建好了！
