精华内容
下载资源
问答
  • ant-design-vue按需引入icon以及组件

    万次阅读 多人点赞 2020-05-12 19:15:26
    安装ant-design-vue 1.1 分析全部引入体积有多大 1.2 ant-design-vue按需引入组件 1.3 ant-design-vue按需引入Icon组件 一、初始化vue项目文件夹 1.安装vue/cli (默认电脑已安装了node)打开命令行终端,输入命令...

    3.75M → 1.81M → 99kb的转变

    一、初始化vue项目文件夹

    1.安装vue/cli

    (默认电脑已安装了node)打开命令行终端,输入命令npm install -g @vue/cli 安装vue脚手架工具(已装过不用装,版本需在3.0以上)。安装好后在命令行输入命令vue -V 会出现版本号,如图:
    在这里插入图片描述

    2.创建Vue项目

    在命令行中先cd desktop 到桌面,然后输入命令vue create ant-vue-demo,然后会出现如下图:
    在这里插入图片描述
    键盘上下键选择,我们选择第二个default,回车就可以了。安装好后如下图:
    在这里插入图片描述
    接着我们将桌面创建好的vue项目文件夹ant-vue-demo拖到vscode编辑器中。如下图:
    在这里插入图片描述
    打开后如图:
    在这里插入图片描述
    至此我们的vue初始化项目完成。

    二、按需引入ant-design-vue

    1.安装ant-design-vue

    接着我们打开vscode的终端Terminal,然后输入命令npm i ant-design-vue,如下图:
    在这里插入图片描述
    安装好后,我们在package.json,运行时的依赖里就可以看到ant-design-vue,同时我们去配置,打包时候的分析报告,--report,如下图:
    在这里插入图片描述
    别忘记修改后保存。

    1.1 分析全部引入体积有多大

    接着我们先来全部引入看看包有多大,打开src文件夹下的main.js,输入:

    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    Vue.use(Antd);
    

    如图:
    在这里插入图片描述
    然后我们在src文件夹下App.vue,输入的评分组件代码:

    <a-rate :default-value="5">
          <a-icon type="star" slot="character"></a-icon>
        </a-rate>
    

    然后在vscode命令行终端输入命令npm run serve,如下图:
    在这里插入图片描述
    我们在浏览器打开,如图所示,ant-design-vue的评分组件就显示在页面了:
    在这里插入图片描述
    接着我们再打开一个命令行终端,我们进行打包压缩分析,在新开的命令行终端输入npm run build,如下图:
    在这里插入图片描述
    然后我们打开ant-vue-demo/dist/report.html:如图:
    在这里插入图片描述
    可以看到我们就引了一个评分组件,打包后就这么大了足足有3.75M,这显然是不行的,我们的理想是按需引入。接下来我们来按需引入。

    1.2 ant-design-vue按需引入组件

    好的,我们现在终端命令行中输入命令npm i babel-plugin-import --dev,如图所示:
    在这里插入图片描述
    接着修改babel.config.js里代码,增加如下代码:

    plugins: [
         [
           "import",
           { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css'}
         ]
       ]
    

    如图所示添加:
    在这里插入图片描述
    然后在main.js文件中删除全部引入的代码,增加按需引入的代码:

    import { Rate,Icon } from 'ant-design-vue'
    Vue.use(Rate).use(Icon)
    

    在这里插入图片描述
    我们重新配置好之后最好重新去启动下服务,否则可能会存在样式出不来的效果,好的我们看到页面也是正常显示评分组件的,如图:
    在这里插入图片描述
    接下来我们再重新开一个命令行终端,npm run build去生成打包的分析,如下图:
    在这里插入图片描述
    可以直观的看到现在只有1.81M,比之前全部引入足足小了1.7M
    但是这还不是我们想要的,可以看到我们只引入Icon组件里的星星图表,但是它自己全部进来了,还有moment,我们也不需要这么多。

    1.3 ant-design-vue按需引入Icon组件

    我们在ant-vue-demo文件夹下创建vue.config.js,输入如下代码:

    const path = require('path')
    const {IgnorePlugin} = require('webpack')
    function resolve (dir) {
        // path.join()方法用于连接路径
        return path.join(__dirname, dir)
    } 
    module.exports = {
        publicPath: './',
        configureWebpack: {
            plugins: [
                new IgnorePlugin(/^\.\/locale$/, /moment$/)
            ],
            resolve: {
                alias:{
                    '@ant-design/icons/lib/dist$': resolve('./src/antd/icons.js')
                }
            }
        }
    }
    

    如下图:
    在这里插入图片描述
    注释写在图中,接着我们在src文件夹下创建antd文件夹,在antd文件夹下创建icons.js这里面就可以写一些我们需要的icon图表,如下图:
    在这里插入图片描述
    好的,我们再在命令行中输入npm run build,然后打开我们文件分析,如图:
    在这里插入图片描述
    可以看到这次只有846kb左右了,我们从一开始的3.75M1.81M再到846kbgzip压缩99kb,(3.75M → 99kb)已经优化了很多了,当然此时你去刷新页面,会发现没有星星组件了,如图:
    在这里插入图片描述
    那这是为什么呢?因为我们在自己写的icons.js中啥事还没做,输入如下代码,按需引入星星图标:

    export {
        default as StarOutline
    } from '@ant-design/icons/lib/outline/StarOutline'
    

    如图所示:
    在这里插入图片描述
    这下再npm run serve重启下服务,星星组件就出来了:
    在这里插入图片描述
    然后我们再次在命令行中输入命令npm run build打包证明下看看icon组件是否被全部引入:
    在这里插入图片描述
    我们可以看到icon只有12kb大小。至此ant-design-vue icon的按需加载完成。

    如果你觉得本文对你有帮助的话,请给我一个赞吧。如果有更好的解决方案还望评论告知,谢谢了,愿一起共同进步。

    展开全文
  • 按需要引入 Mint UI ,有两种情况:  1. 引入全部组件  如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中: ... 按需引入  如果你只需要...

    按需要引入 Mint UI ,有两种情况:

      1. 引入全部组件

        如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

    import Mint from 'mint-ui';
    Vue.use(Mint);
    import 'mint-ui/lib/style.css'; 

      2. 按需引入

        如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

    import Button from 'mint-ui/lib/button';
    import 'mint-ui/lib/button/style.css';
    Vue.component(Button.name, Button);

        上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。

    1. 使用插件, 首先当然是安装它:

     cnpm i babel-plugin-component -D

     2. 然后在 .babelrc 中配置它:

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-vue-jsx", "transform-runtime",
        [
          "component",
          [
            {
              "libraryName": "mint-ui",
              "style": true
            }
          ]
        ]
      ]
    }
    

     3. 这样上述两种引入方法就可以简化为:

    复制代码

    //import Mint from 'mint-ui';
    //Vue.use(Mint);
    //import 'mint-ui/lib/style.css';    //不需要手动导入mint-ui样式
    import Button from 'mint-ui/lib/button';
    Vue.component(Button.name, Button);
    
    import { Swipe, SwipeItem } from 'mint-ui';   //按需引入部分组件
    Vue.component(Swipe.name, Swipe);
    Vue.component(SwipeItem.name, SwipeItem);

    复制代码

        前面安装的插件会自动引入相应的 CSS 文件!

    参考:在vue项目中安装使用Mint-UI

    官方参考:https://mint-ui.github.io/docs/#/en2/quickstart

    Element-ui按需引入

    element UI组件的单独使用(第一种方法):
        1、cnpm install babel-plugin-component -D    
        2、找到.babelrc 配置文件
            plugins改为: 

      {
              "plugins": [
                [
                  "component",
                  {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
                  }
                ]
              ]
            }

        3、
        import { Button, Select } from 'element-ui';

        Vue.use(Button)
        Vue.use(Select)


    element UI组件的单独使用(第二种方法):

        import { Button, Select } from 'element-ui';

        Vue.use(Button)
        Vue.use(Select)

        引入对应的css

    import 'element-ui/lib/theme-chalk/index.css';

    同时引入两种ui库(思路)

    1.采用单独的样式,手动引入控件

    2.名字相同的控件起个别名

    //引入element-ui的Button控件
    import {Button} from 'element-ui';
    import 'element-ui/lib/theme-chalk/button.css';
    
    Vue.use(Button);
    
    //引入mint-ui的Actionsheet控件,Actionsheet里面用到了Button
    import {Actionsheet} from 'mint-ui';
    //名字相同的控件起个别名,这里用MyButton代表mint-ui的Button
    import MyButton from 'mint-ui/lib/button';
    import 'mint-ui/lib/actionsheet/style.css'
    import 'mint-ui/lib/button/style.css'
    
    Vue.component(Actionsheet.name, Actionsheet);
    Vue.component(MyButton.name, MyButton);

    使用mint-ui的ActionSheet:

    <mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
        <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>

    使用element-ui的Button:

    <el-button type="success">成功按钮</el-button>

     

    展开全文
  • Vue项目按需引入Vant组件

    千次阅读 2020-01-15 14:08:21
    1.安装Vant ...按照官网上写的,安装babel 插件后,就能在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 官网上说在.babelrc 中添加配置 { "p...

    1.安装Vant

    # 通过 npm 安装
    npm i vant -S
    
    # 通过 yarn 安装
    yarn add vant

    2.安装babel 插件

    按照官网上写的,安装babel 插件后,就能在编译过程中将 import 的写法自动转换为按需引入的方式

    # 安装插件
    npm i babel-plugin-import -D

    官网上说在.babelrc 中添加配置

    {
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }

    不过在项目里发现.babelrc文件中还有其他内容

    "plugins": ["transform-vue-jsx", "transform-runtime"]

    都是字符串,和需要添加的格式不大一样。没关系,直接加在后面就好。加好后的就是这样:

      "plugins": ["transform-vue-jsx", "transform-runtime",
        [
          "import",
          {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style":true
          }
        ]
      ]

    3.在页面里引用

    import { Button } from 'vant';

    官网到这就完了。但是你会发现一运行还是报错,

    还得把组件注册一下。

    用了Vux组件库的伙伴会习惯这样写

    components: { Grid, GridItem }

    一运行还是报错,那是因为使用的vux模板已经帮忙处理好了。

    而对于Vant正确写法应该是

      components: {
        [Grid.name]: Grid,
        [GridItem.name]: GridItem
      }

    页面完整内容就是

    <template>
      <div class="wrapper">
        <van-grid :column-num="3">
          <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字"/>
        </van-grid>
      </div>
    </template>
    
    <script>
    import { Grid, GridItem } from "vant";
    export default {
      components: {
        [Grid.name]: Grid,
        [GridItem.name]: GridItem
      },
      props: {},
      data() {
        return {};
      },
      methods: {}
    };
    </script>
    

     

    展开全文
  • vue按需加载组件-webpack require.ensure

    万次阅读 多人点赞 2017-07-28 09:58:07
    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,

    打包位置是 dist/static/js/app.[contenthash].js
    类似下面的路由代码

    router/index.js 路由相关信息,该路由文件引入了多个 .vue组件

    import Hello from '@/components/Hello'
    import Province from '@/components/Province'
    import Segment from '@/components/Segment'
    import User from '@/components/User'
    import Loading from '@/components/Loading'

      执行 npm run build 会打包为一个整体 app.[contenthash].js ,这个文件是非常大,可能几兆或者几十兆,加载会很慢

    这里写图片描述

      所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去,分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,相同 chunk名字的模块将会打包到一起。

    webpack中利用require.ensure()实现按需加载

    1、require.ensure()

      webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

    语法如下:

    require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    • 依赖 dependencies

      这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。

    • 回调 callback

      当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require() 依赖和其它模块提供下一步的执行。

    • chunk名称 chunkName

      chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

    让我们来看以下的项目

    \\ file structure
        |
        js --|
        |    |-- entry.js
        |    |-- a.js
        |    |-- b.js
        webpack.config.js
        |
        dist
    \\ entry.js
    
    require('a');
    require.ensure([], function(require){
        require('b');
    });
    \\ a.js
    console.log('***** I AM a *****');
    \\ b.js
    console.log('***** I AM b *****');
    \\ webpack.config.js
    var path = require('path');
    
    module.exports = function(env) {
        return {
            entry: './js/entry.js',
            output: {
                filename: 'bundle.js',
                path: path.resolve(__dirname, 'dist')
            }
        }
    }

      通过执行这个项目的 webpack 构建,我们发现 webpack 创建了2个新的文件束, bundle.js 和 0.bundle.js。

    entry.js 和 a.js 被打包进 bundle.js.

    b.js 被打包进 0.bundle.js.

    2、require.ensure() 的坑点

    (1)、空数组作为参数

    require.ensure([], function(require){
        require('./a.js');
    });

    以上代码保证了拆分点被创建,而且 a.js 被 webpack 分开打包。

    (2)、依赖作为参数

    require.ensure(['./a.js'], function(require) {
        require('./b.js');
    });

      上面代码, a.js 和 b.js 都被打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用,但并没有被输出。

      想去执行 a.js,我们需要异步地引用它,如 require(‘./a.js’),让它的 JavaScritp 被执行。

    (3)、单独打包成自己写的名字配置
      需要配置chunkFilename,和publicPath。publicPath是按需加载单独打包出来的chunk是以publicPath会基准来存放的,chunkFilename:[name].js这样才会最终生成正确的路径和名字

    module.exports={
        entry:'./js/entry.js',
        output:{
            path:path.resolve(__dirname,"./dist"),
            filename:'js/a.bundle.js',
            publicPath:"./",
            chunkFilename:'js/[name].js'
        }

    所以router/index.js 修改为懒加载组件:

    const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
    const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname2')
    const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
    const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

      根据 chunkame的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)

      分模块打包之后在 dist目录下是这样的, 这样就把一个大的 js文件分为一个个小的js文件了,按需去下载,其他的使用方法和import的效果一样

    这里写图片描述

    参考:http://blog.csdn.net/yangbingbinga/article/details/61417689
       http://www.css88.com/doc/webpack2/guides/code-splitting-require/

    展开全文
  • vue按需加载组件 ----3种方法

    万次阅读 2018-04-26 14:09:01
    1. vue异步组件技术vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,...
  • vue 修改外部引入组件样式

    千次阅读 2018-08-21 12:28:48
    vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性,以表示它的只属于当下的模块; 但是因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped...
  • Ant Design Vue按需加载组件报错

    千次阅读 2019-12-17 16:45:48
    antd之按需加载组件 我们这里主要说说踩到的坑,报错如图: 官方给的例子是Button,用同样方式,我成功加载了Table, Input, Form等组件,但FormItem 报错没有正确注册组件。 通过打印 Form 找到原因:FormItem与...
  • vue项目中引入组件

    千次阅读 2019-08-10 15:50:00
    vue组件化的开发。一个页面中,是一个组件,他也是由多个组件构成的。 第一个问题,项目中怎么引入页面? 使用v-cli自动搭建脚手架,他已经给我们配好了路由,还做好了一个HelloWorld的界面。 那么这个界面是怎么...
  • 需求 就是有一个组件库,需要根据接口所传的组件类型按需引入生成页面 //模板 <template> <div class="hello"> <component v-for="(item,index) in componentArr" :key="index" :is="item.type" :...
  • 一、按需引入ElementUI组件 有时候项目中只用到ElementUI中的几个组件,全局引入会增加项目体积,所以按需引入更合适 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 (1)...
  • vue问题-ant-design-vue按需引入问题

    千次阅读 2020-11-10 17:00:28
    插件按需引入 vue项目中使用了UI框架 ant-design-vue ,因为开始尝试vue3.0,因为有些不熟悉,在使用使用了vue2.0的方式没成功,所以浪费了很长时间,最后发现是个人疏忽导致的,所以记录一下,以防之后遇到同样的...
  • 从新建vue项目到引入组件Element流程

    万次阅读 2017-02-27 13:55:27
    从新建vue项目到引入组件Element 以及Error when rendering component报错解决 一、新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo 进入这一级 3.运行:npm install 4.运行:npm run ...
  • vue项目中按需引入vant组件

    千次阅读 2020-05-31 00:32:46
    [b][size=24px]vue项目使用vant组件库[/size][/b] vant组件库官网 [color=#0000FF][url=https://youzan.github.io/vant/#/zh-CN/quickstart][/url][/color] ...然后在.babelrc 中添加配置 样式按需加载 { "plugins":
  • 平时在项目中实现数据可视化,可以使用百度的开源图表库echarts,根据项目需求来绘制生成...因为通过vue-echarts按需引入时,一些组件模块(如折线图、柱状图,提示框和标题组件等)需要依赖已经包含所有图表和组...
  • vue-cli 引入组件并传值

    千次阅读 2018-07-29 22:59:15
    第一步:引入需要用到的组件页面   import slideshow from './../components/slideshow.vue' //例如这是轮播图组件页面   第二步:定义组件   &lt;template&gt; &lt;div id="slideshow...
  • vue3中使用vant组件按需引入 和 Toast组件报错 Toast is not define main.js中: import { createApp } from 'vue' import 'lib-flexible/flexible' import App from './App.vue' //vant组
  • Vue-Cli 按需引入Ant Design of Vue 组件

    千次阅读 2020-01-17 20:02:49
    一)、安装Ant Design of Vue cnpm install ant-design-vue --save ...为了方便进行按需引入Ant Design of Vue组件,使用 babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件 此插件配合 st...
  • vue按需引入element Transfer 穿梭框

    千次阅读 2017-09-29 21:30:28
    Transfer 穿梭框按需引入Transfer编辑main.jsimport { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, compon
  • ant-design-vue组件按需引入及报错解决

    千次阅读 2020-12-08 09:15:00
    ant-design-vue 组件按需引入 按需引入 如果使用babel的话,可以使用 babel-plugin-import 来进行按需加载。 安装babel-plugin-import: npm install babel-plugin-import --save-dev 配置bable.config.js: module...
  • vue+webpack 实现组件按需引入

    千次阅读 2018-03-07 17:41:54
    Element官网,//官网:http://element-cn.eleme.io/#/zh-CN/component/quickstart注释 vue用webpack打包时 es6语言可能不兼容部分浏览器 可以安装es2015模块1、安装依赖包1$ npm install --save-dev babel-preset-...
  • 部分引入element-ui组件,需要什么引入什么,减少压缩文件的体积。
  • Vue笔记——Vue组件引入jQuery

    千次阅读 2018-10-14 14:43:55
    但是如果要在Vue组件中使用jQuery库的话,使用这样的方式就不行了,需要使用以下方法 一、安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save #...
  • 一 普通引入方式 import 组件名 from ‘组件路径’ ...二 Vue异步组件技术 component: (resolve) => require(['@/views/login/login'], resolve) 三 使用动态的import( )语法(推荐使用) compone
  • const path = require('path') export default { build: { babel: { plugins: [ // VantUI 自动按需引入组件配置 [ 'import', { libraryName: 'vant', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,198
精华内容 36,079
关键字:

vue按需引入组件

vue 订阅