欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-10 17:00:26
文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言市面上前端UI框架可以说是很多很多,今天想和大家一起聊一聊如何在vue项目中适用antd UI框架(因为之前在react项目中一直是用的antd UI框架,感觉整体风格挺不错)一、使用步骤1.安装antdcnpm install ant-design-vue --save//注意:需要安装ant-design-vue(区别于在react项目中的安装命令 antd......

前言

市面上前端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】vue项目中使用antd UI框架,从创建新项目开始一步一步来探索吧

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

cnpm install vue-template-compiler@>=2.6.0

cnpm install core-js@3

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

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 ,奇了怪了,有报错了,好吧,先看报错信息(没有报错的请忽略)

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

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

cnpm install less-loader

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

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

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

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

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

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

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

 lessOptions.javascriptEnabled=true;

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

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

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

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

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


总结

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

本文地址:https://blog.csdn.net/liuzhenhe1988/article/details/108842220

相关标签: VUE ant