vue学习笔记08

An-Desgin-vue

　　官网地址：https://www.antdv.com/docs/vue/introduce-cn/

npm安装

npm install ant-design-vue --save

yarn安装

 yarn add ant-design-vue

安装完成之后，就可以直接在main.js引入了。在上篇日记创建中的项目中接着写。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";  
import "ant-design-vue/dist/antd.css"  
Vue.config.productionTip = false;

Vue.use(Antd);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

这是全局注册。所有的组件都会引用。然后就可以去模板中使用。然后上面代码中，引入的样式格式是css，如果你需要使用less。就得吧css后缀改成less。

如果你用的less但是没有转译，就会报错。

Failed to compile.

./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-3-1!./node_modules/postcss-loader/src??ref--10-oneOf-3-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-3-3!./node_modules/ant-design-vue/dist/antd.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in E:
odejscoleTextdemo03
ode_modulesant-design-vuelibstylecolorezierEasing.less (line 110, column 0)

中间的连接可以打开查看这个错误信息，有解决两种解决方式，一是降低less版本，二是开启JavaScript，这里选第二种。去vue.config.js里配置。

在项目的根目录下创建 vue.config.js文件。

// vue.config.js
module.exports = {
    // 选项...
    css: {
        loaderOptions: {
          less: {
            // 这里的选项会传递给 css-loader
            javascriptEnabled: true
          }
        }
      }
  }

热更新不会对配置做改变，需要重新启动项目。

以上是全部引入组件。但是实际上并不会使用全部的组件。这里可以使用按需引用。下面如果只引入一个button

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Button from 'ant-design-vue/lib/button'
import "ant-design-vue/lib/button/style"  
Vue.config.productionTip = false;

Vue.use(Button);


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

但如果每个组件都需要这样单独引入，并单独引入样式，就比较繁琐。

这里ant-design提供一个插件，方便按需引入。

先下载

npm i --save-dev babel-plugin-import

然后去babel.config.js里面修改

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ] // `style: true` 会加载 less 文件
  ]
};

插件会帮你转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合style属性可以做到模块样式的按需自动加载。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { Button, Layout, Icon, Drawer, Radio, Menu } from "ant-design-vue";

Vue.config.productionTip = false;

Vue.use(Button);
Vue.use(Layout);
Vue.use(Icon);
Vue.use(Drawer);
Vue.use(Radio);
Vue.use(Menu);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

这样就可以按需引用了。