美文网首页Vue
在 vue-cli 3 中使用Ant Design

在 vue-cli 3 中使用Ant Design

作者: 如烟灬 | 来源:发表于2019-04-22 08:46 被阅读97次

    安装和初始化 #

    我们需要在命令行中安装 vue-cli 工具,你可能还需要安装 yarn

    $ npm install -g @vue/cli
    # OR
    $ yarn global add @vue/cli
    
    

    然后新建一个项目。

    $ vue create antd-demo
    
    

    并配置项目。

    工具会自动初始化一个脚手架并安装 Vue 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理或使用其他 npm registry。

    然后我们进入项目并启动。

    $ cd antd-demo
    $ npm run serve
    
    

    此时浏览器会访问 http://localhost:8080/ ,看到 Welcome to Your Vue.js App 的界面就算成功了。

    引入 antd #

    这是 vue-cli 生成的默认目录结构。

    ├── README.md
    ├── babel.config
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   └── HelloWorld.vue
    │   ├── App.vue
    │   └── main.js
    └── yarn.lock
    
    

    现在从 yarn 或 npm 安装并引入 ant-design-vue。

    $ yarn add ant-design-vue
    
    

    修改 src/main.js,引入 antd 的按钮组件以及全部样式文件。

    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">
        <img src="./assets/logo.png">
        <a-button type="primary">Button></a-button>
      </div>
    </template>
    ...
    
    

    好了,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的官方文档

    高级配置 #

    我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。

    此时我们需要对 vue-cli 的默认配置进行自定义。

    使用 babel-plugin-import #

    babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理)。

    $ yarn add babel-plugin-import --dev
    
    

    使用 vue-cli 2 的小伙伴 #

    修改.babelrc文件,配置 babel-plugin-import

      {
        "presets": [
          ["env", {
            "modules": false,
            "targets": {
              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
          }],
          "stage-2"
        ],
    -   "plugins": ["transform-vue-jsx", "transform-runtime"]
    +   "plugins": [
    +     "transform-vue-jsx",
    +     "transform-runtime",
    +     ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
    +   ]
      }
    
    

    使用 vue-cli 3 的小伙伴 #

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

     module.exports = {
      presets: ["@vue/app"],
    +  plugins: [
    +    [
    +      "import",
    +      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    +    ]
    +  ]
    };
    
    

    然后移除前面在 src/main.js 里全量添加的 import 'ant-design-vue/dist/antd.css'; 样式代码,并且按下面的格式引入模块。

      // src/main.js
      import Vue from 'vue'
    - import Button from 'ant-design-vue/lib/button';
    + import { Button } from 'ant-design-vue';
    - 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");
    
    

    最后重启 npm run serve 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里

    相关文章

      网友评论

        本文标题:在 vue-cli 3 中使用Ant Design

        本文链接:https://www.haomeiwen.com/subject/esjjgqtx.html