【vue】vue项目中使用antd UI框架，从创建新项目开始一步一步来探索吧

前言

市面上前端UI框架可以说是很多很多，今天想和大家一起聊一聊如何在vue项目中使用antd UI框架（因为之前在react项目中一直是用的antd UI框架，感觉整体风格挺不错），接下来就从安装脚手架-》创建项目-》安装antd框架-》引用antd一步一步来探索吧

---

1、安装vue脚手架

cnpm install -g @vue/cli
//如果之前已经安装过请跳过

2、创建vue项目（antd-demo）

vue create antd-demo
//我使用的是vue 2.x版本

3.安装antd

cnpm install ant-design-vue --save
//注意：需要安装ant-design-vue（区别于在react项目中的安装命令 antd --save）

4、安装过程中报错处理

按照提示安装vue-template-compiler和core-js@3

cnpm install vue-template-compiler@>=2.6.0

cnpm install core-js@3

5.引入antd组件

a、全局引入并注册（main.js）

修改main.js

import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false;

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

修改 src/App.vue的 template 内容

//注意：由于是全局引用，所以不需要在页面单独引用
<template>
  <div id="app">
    <a-button type="primary">Button></a-button>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
</style>

b、按需加载引用 （推荐）

使用cnpm安装babel-plugin-import包

cnpm install babel-plugin-import --dev

修改babel.config.js文件，配置 babel-plugin-import

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
        [
          "import",
          { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
        ]
      ]
}

然后删除main.js 里全局引用的 import 'ant-design-vue/dist/antd.css'; 样式代码，最终main.js内容如下

import Vue from 'vue'

import App from './App.vue'

import { Button } from 'ant-design-vue';

Vue.component(Button.name, Button);

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

}).$mount('#app')

 

6、启动项目

运行npm run serve ，奇了怪了，有报错了，好吧，先看报错信息（没有报错的请忽略）

那就乖乖的先按照提示安装less-loader

cnpm install less-loader

执行后，又出现了依赖包的问题，如下

怎么办呢，接着安装吧，运行cnpm install less

安装完成后，再次运行npm run serve, 错误又来了，如下

出现此问题的原因是因为less的版本太高，可以通过降低less版本到2.x，也可以通过增加less-loader里面的配置来解决

找到node_modules\less-loader\dist\index.js文件，然后在对象lessOptions下行添加如下代码即可

 lessOptions.javascriptEnabled=true;

再次运行npm run serve，正常运行

说明：目前页面中只有一个antd button组件

---

总结

以上就是今天要讲的内容，虽然有些坎坷，不过也是一种积累过程吧，哈哈（自我安慰一下下），如上若有错漏的地方，请大家及时指出,多谢