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