ant-desing-vuex系列1--集合@vue/cli4简单使用
1、安装@vue/cli4
npm install -g @vue/cli
2、vue create之后安装ant-design-vue
npm i ant-design-vue --save
3、配置按需加载
npm i babel-plugin-import --save-dev
4、修改根目录的 babel.config.js, 配置 babel-plugin-import
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
}
4、配置less
运行报错Module not found: Error: Can't resolve 'less-loader'
npm i less less-loader --save-dev
5、根目录创建 vue.config.js 文件,配置如下
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
6、项目中引用
src/main.js 文件中
import Vue from 'vue'
import { Button, Select } from 'ant-design-vue';
import App from './App'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount("#app");<br><br><br>组件中就可以使用:<br><a-button type="primary">winyh</a-butto