Vue项目如何ant-design-vue框架?

  1. 进入我们刚才创建的项目目录cd vue_ant
  2. 安装多个组件
cnpm i --save ant-design-vue moment

// 安装最新版的ant-design-vue,支持vue3
cnpm i --save ant-design-vue@next 

这里我们使用的是淘宝的景象cnpm,因为npm在国内使用很慢,这里安装了两个组件分别是ant-design-vue和时间库moment,多个组件同时安装,只需要在中间以空格隔开即可!

  1. 启动项目
npm run serve

全局引入组件

main.js文件中全局引入组件ant-design-vue

import { createApp } from "vue";
import Antd from 'ant-design-vue'
import App from "./App.vue";
// 引入css样式
// import 'ant-design-vue/dist/antd.css'

// 引入less样式,这里会报错
import 'ant-design-vue/dist/antd.less'

const app = createApp(App)

// 关闭生产模式下的提示
app.config.productionTip = false;

app.use(store)
   .use(router)
   .use(Antd)
   .mount("#app");

引入less样式后,项目会保存,解决方案是,在项目根目录创建一个vue.config.js的文件,插入如下配置:

官方文档:

https://cli.vuejs.org/zh/config/#css-loaderoptions

module.exports = {
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true
        },
      }
    }
  }

必须开启webpack中javascript配置,重启项目即可解决!

按需引入组件

main.js文件中按需引入组件ant-design-vue

// 按需引入
import { Button } from "ant-design-vue/lib/button"
import 'ant-design-vue/lib/button/style'

app.use(Button)

把相关的地方替换即可,引入哪一个加载哪一个!

如果我们要使用很多这样的组件,手动引入将是一个非常庞大的工程,也不够简洁,那么我们可以通过babel的一个插件去解决这个问题!

  • 在babel.config.js中引入以下内容即可!
plugins: [
    [
      "import",
      { 
        libraryName: "ant-design-vue", 
        libraryDirectory: "es", 
        style: true 
      }
    ]
  ]  // 'style: true' 会加载less文件, css的话直接设置为'style: css'

之后样式我们也不需要单独引入,只需要像下边这样引入即可,原来视频中的讲解这里有语法错误,plugins是一个数组,可以设置多个,如果要设置单个的话并且传入了自定义参数,那么这里也是一个数组,所以就是数组嵌套数组的写法!

import { Button } from "ant-design-vue"

还必须要安装babel-plugin-import

cnpm i --save-dev babel-plugin-import

你可能感兴趣的:(javascript,vue.js,javascript,typescript)