精华内容
下载资源
问答
  • vuecli3创建的组件库工程实现按需引入

    千次阅读 热门讨论 2019-08-26 14:31:48
    工程地址 创建一个vuecli3项目:vue create demo-vuecli3-ui 手动选择特性,我这里只要Babel以及Css-Professor; 然后选择Sass/SCSS,开发者按照自己的喜好来选择css预处理语言; ...

    工程地址

    1. 创建一个vuecli3项目:
      vue create demo-vuecli3-ui
      
      手动选择特性,我这里只要Babel以及Css-Professor;
      然后选择Sass/SCSS,开发者按照自己的喜好来选择css预处理语言;
    2. 启动检查是否正常,npm run serve
      [外链图片转存失败(img-4l6U1F2X-1566802198122)(AE419B7078334401AEAF03CBD849727C)]
      没问题,一切正常;
    3. 这里组件库的名字为:demo-vuecli3-ui,现在开始写组件,这里只写两个组件:
      • pl-button
      • pl-input

        除了这两个组件之外,还需要有一个体积比较大的组件,不然到时候测试按需引入的时候,很难观察到只引入部分组件(比如只引入button)所带来的打包体积优化效果。这里这个体积比较大的组件,使用element-ui来替代,把element-ui当做一个组件看待;
    4. 安装element-ui
      npm i element-ui -D
      
      这里为什么要-D-D--save-dev的缩写,-S--save的缩写,--save会将依赖添加到package.jsondependency列表中,如果是--save-dev,会将依赖添加到devDependency列表中。将组件打包,然后发布到npm仓库之后,用户可以通过npm i demo-vuecli2-ui --save安装依赖,这时候,用户安装的时候也会去下载element-ui,这个可以通过观察node_modules/demo-vuecli2-ui目录验证,这个目录下面也会有一个node_modules文件夹,其中就是demo-vuecli2-ui的dependency列表。实际上用户是不需要再次安装下载element-ui的,所以这里是-D
    5. 编写组件,根目录下创建components文件夹,目录结构:
      - components
          - button
              - index.js
              - pl-button.vue
          - ele
              - index.js
          - input
              - index.js
              - pl-input.vue
          - index.js
      
      文件内容:
      /*components/button/index.js*/
      import Button from './pl-button'
      Button.install = (Vue) => Vue.component(Button.name, Button);
      export default Button
      
      /*components/button/pl-button.vue*/
      <template>
        <div class="pl-button">
          pl-button
        </div>
      </template>
      
      <script>
        export default {
          name: "pl-button"
        }
      </script>
      
      <style lang="scss">
        .pl-button {
          background-color: maroon;
          color: white;
        }
      </style>
      
      /*components/ele/index.js*/
      import ELE from 'element-ui'
      import 'element-ui/lib/theme-chalk/index.css'
      
      export default {
        install(Vue) {
          Vue.use(ELE)
        },
      }
      
      /*components/input/index.js*/
      import Input from './pl-input'
      Input.install = (Vue) => Vue.component(Input.name, Input)
      export default Input
      
      /*components/input/pl-input.vue*/
      <template>
        <div class="pl-input">
          pl-input
        </div>
      </template>
      
      <script>
        export default {
          name: "pl-input"
        }
      </script>
      
      <style lang="scss">
        .pl-input {
          background-color: #42b983;
          color: white;
        }
      </style>
      
      
      这个是总的打包入口
      /*components/index.js*/
      import Button from './button'
      import Input from './input'
      import Ele from './ele'
      
      export default {
        install(Vue) {
          Vue.use(Button)
          Vue.use(Input)
          Vue.use(Ele)
        },
      }
      
      

      这样用户在全引入组件库`demo-vuecli2-ui`,因为element-ui的存在,打包的体积会非常大,而用户在按需引入button以及input的时候,因为没有element-ui,打包的体积会大大缩小;
    6. 修改main.js,全引入demo-vuecli3-ui,用来调试组件。
      import Vue from 'vue'
      import App from './App.vue'
      
      import DVU3 from 'demo-vuecli3-ui'
      Vue.use(DVU3)
      
      Vue.config.productionTip = false
      
      new Vue({
          render: h => h(App),
      }).$mount('#app')
      
    7. 修改App.vue,展示组件:
      <template>
        <div id="app">
          <img alt="Vue logo" src="./assets/logo.png">
          <pl-input/>
          <pl-button/>
          <el-button>hello world</el-button>
          <el-input/>
        </div>
      </template>
      
      <script>
      export default {
        name: 'app',
      }
      </script>
      
      <style lang="scss">
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
      </style>
      
    8. 创建目录,build,创建文件build/utils.js:
      const fs = require('fs')
      const path = require('path')
      const join = path.join
      const resolve = (dir) => path.join(__dirname, '../', dir)
      
      module.exports = {
          resolve,
          getComponentEntries(path) {
              let files = fs.readdirSync(resolve(path));
              const componentEntries = files.reduce((ret, item) => {
                  const itemPath = join(path, item)
                  const isDir = fs.statSync(itemPath).isDirectory();
                  if (isDir) {
                      ret[item] = resolve(join(itemPath, 'index.js'))
                  } else {
                      const [name] = item.split('.')
                      ret[name] = resolve(`${itemPath}`)
                  }
                  return ret
              }, {})
              console.dir(componentEntries)
              return componentEntries
          },
      }
      
    9. 创建文件build/config.pub.js,这个是本地调试以及打包组件都需要的配置信息:
      const utils = require('./utils')
      
      module.exports = {
          resolve: {
              extensions: ['.js', '.vue', '.json'],
              alias: {
                  'src': utils.resolve('src'),
                  'components': utils.resolve('components'),
                  'demo-vuecli3-ui': utils.resolve('components/index.js'),
              }
          },
      }
      
    10. 创建文件build/config.dev.js,这个是本地调试的时候加载的配置文件:
      const pub = require('./config.pub')
      
      module.exports = {
          pages: {
              index: {
                  // page 的入口
                  entry: 'src/main.js',
                  // 模板来源
                  template: 'public/index.html',
                  // 在 dist/index.html 的输出
                  filename: 'index.html',
                  // 当使用 title 选项时,
                  // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
                  title: 'pl-app document',
                  // 在这个页面中包含的块,默认情况下会包含
                  // 提取出来的通用 chunk 和 vendor chunk。
                  chunks: ['chunk-vendors', 'chunk-common', 'index']
              },
          },
          configureWebpack: {
              resolve: pub.resolve
          },
      }
      
    11. 创建文件build/config.build.js,这个是打包组件的时候,加载的配置文件:
      const {resolve, getComponentEntries} = require('./utils')
      const pub = require('./config.pub')
      
      module.exports = {
          outputDir: resolve('lib'),
          configureWebpack: {
              entry: {
                  ...getComponentEntries('components'),
              },
              output: {
                  filename: '[name]/index.js',
                  libraryTarget: 'commonjs2',
                  libraryExport: 'default',
                  library: 'demo-vuecli3-ui',
              },
              resolve: pub.resolve,
          },
          css: {
              sourceMap: true,
              extract: {
                  filename: '[name]/style.css'
              }
          },
          chainWebpack: config => {
              config.optimization.delete('splitChunks')
              config.plugins.delete('copy')
              config.plugins.delete('preload')
              config.plugins.delete('prefetch')
              config.plugins.delete('html')
              config.plugins.delete('hmr')
              config.entryPoints.delete('app')
      
              config.module
                  .rule('fonts')
                  .use('url-loader')
                  .tap(option => {
                      option.fallback.options.name = 'static/fonts/[name].[hash:8].[ext]'
                      return option
                  })
          }
      }
      
      这里面主要讲chainWebpack中做了什么事情:
      • 删除splitChunks,在打包组件的时候,并不希望抽离每个组件的公共js出来,而是每个独立打包,于是删除这个配置;
      • 删除copy:不要复制public文件到打包目录;
      • 删除preload以及prefetch,因为删除了html插件,所以这两个也没用;
      • 删除html,只打包组件,不生成html页面;
      • 删除hmr,删除hot-module-reload;
      • 删除自动加上的入口:app
      • 下面的配置fonts这个rule,打包字体的时候,输出到打包目录的static/fonts目录下;
    12. 本地调试启动,检查效果:npm run serve
      [外链图片转存失败(img-t61MQgGy-1566802198124)(956D822BB84148F083572A1CE57918AB)]
    13. 打包:npm run build,打包结果:
      [外链图片转存失败(img-hR6dC7h9-1566802198124)(AC1C44C5182F436A96A99FB9C011FE66)]
      [外链图片转存失败(img-uQ4B0k0v-1566802198124)(5E50901B0BEF4C77AB1DE1A110202F1F)]
    14. 修改package.json
      • 修改版本号version为0.0.1
      • 删除private:true
      • 添加"main":“lib/index/index.js”
      • 添加"files":[“lib”]
    15. 发布到npm,npm publish
      [外链图片转存失败(img-nGiuHGOF-1566802198125)(DA6502EEBAD44BF5989F31A7D1F08009)]
      看到这个+ demo-vuecli3-ui就表示发布成功。
    16. 使用上一篇创建的测试工程test-load-on-demand测试demo-vuecli3-ui的按需引入功能是否完成。安装demo-vuecli3-ui:
      npm i demo-vuecli3-ui -S
      
    17. src/main.js中全引入demo-vuecli3-ui:
      import Vue from 'vue'
      import App from './App.vue'
      
      import DVU3 from 'demo-vuecli3-ui'
      import 'demo-vuecli3-ui/lib/index/style.css'
      
      Vue.use(DVU3)
      
      Vue.config.productionTip = false
      new Vue({
          render: h => h(App),
      }).$mount('#app')
      
    18. 本地调试启动,检查效果:
      [外链图片转存失败(img-LAjfSiTn-1566802198126)(77B2A3F4782E47A08897A6B52E410D3F)]
      可以看到,app.js大概有4.1m
    19. 打包页面,检查效果:
      [外链图片转存失败(img-UeX3ls3K-1566802198126)(1C0567A02EE14579AFA138B6489E6E90)]
      可以看到,chunk-vendor有800多k
    20. 配置按需引入,安装插件:babel-plugin-import
      npm i babel-plugin-import -D
      
    21. 配置.babelrc文件:
      {
        "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
        "plugins": [
          [
            "import",
            {
              "libraryName": "demo-vuecli3-ui",
              "style": true
            }
          ]
        ]
      }
      
    22. 配置src/main.js,按需引入Button以及Input组件:
      import Vue from 'vue'
      import App from './App.vue'
      
      import {Button, Input} from 'demo-vuecli3-ui'
      Vue.use(Button)
      Vue.use(Input)
      
      
      Vue.config.productionTip = false
      new Vue({
          render: h => h(App),
      }).$mount('#app')
      
    23. 本地调试启动,检查效果:
      [外链图片转存失败(img-Qnv9oal6-1566802198126)(ECD66CE652B242DF9AC1C6E1B80DE0F0)]
      可以看到,app.js的大小变为1.8m
    24. 打包页面,检查效果:
      [外链图片转存失败(img-roQjGWCh-1566802198127)(18ECDFAD2F4446979AAFA685A965B4EC)]
      可以看到,chunk-vendor变成了123k,体积大大缩小了;
    • 至此,vuecli3工程组件库按需引入说明已经结束
    展开全文
  • 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...

    一)、安装Ant Design of Vue

    cnpm install ant-design-vue --save
    

    二)、安装babel-plugin-import

    官方文档 使用 babel-plugin-import

    为了方便进行按需引入Ant Design of Vue组件,使用 babel-plugin-import

    是一个用于按需加载组件代码和样式的 babel 插件

    此插件配合 style 属性可以做到模块样式的按需自动加载

    cnpm install babel-plugin-import --save
    

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

    使用 vue-cli 3 的小伙伴

    module.exports = {
      presets: ["@vue/app"],
      // 按需引入Ant Design of Vue组件样式
      plugins: [
        [
          "import",
          {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
        ]
      ]
    };
    

    四)、在src/main.js文件中,引入Antd组件

    完整组件列表

    // 引入Ant Design of Vue组件
    import {Card, Avatar, Icon} from 'ant-design-vue'
    
    Vue.component(Card.name, Card);
    Vue.component(Card.Meta.name, Card.Meta);
    Vue.component(Card.Grid.name, Card.Grid);
    Vue.component(Avatar.name, Avatar);
    Vue.component(Icon.name, Icon);
    

    可能出现的问题

    https://github.com/ant-design/ant-motion/issues/44

    Module build failed (from ./node_modules/_less-loader@5.0.0@less-loader/dist/cjs.js):
    
    .bezierEasingMixin();
    ^
    Inline JavaScript is not enabled. Is it set in your options?
    

    解决方案

    修改vue.config.js文件,添加下面的配置

    module.exports = {
      css: {
        loaderOptions: {
          less: {
            // do not remove this line
            javascriptEnabled: true
          }
        }
      }
    }
    
    展开全文
  • Vue组件库实现按需加载功能

    万次阅读 2019-08-26 14:24:48
    文章目录简述示例原理babel-plugin-componentelement-ui按需引入babel-plugin-import组件分开打包以及全部...比如当前流行的web端组件库ElementUI,就有这个按需加载功能;一个系统的登录页,需要的组件是非常少的...

    简述

    按需加载就是需要什么,就只要什么,其他的东西不要。这样做的目的是为了缩小打包体积。

    示例

    比如当前流行的web端组件库ElementUI,就有这个按需加载功能;一个系统的登录页,需要的组件是非常少的,大多数都是只用到Input输入框以及Button按钮。所以为了能够提高登录页面的加载速度,需要使用ElementUI的按需加载功能,只引入输入框以及按钮,这样用户在打开登录页的时候,就不需要等待太久,会有一个比较好的用户体验;

    原理

    本文的原理参考ElementUI,只不过要做的东西比element要简单很多。element在使用按需引入的时候,需要开发者在自己的项目上使用插件babel-plugin-component,这个插件可以将代码中的引入代码进行转换

    babel-plugin-component

    import { Button } from 'components'
    

    这句代码会被转换成:

    var button = require('components/lib/button')
    require('components/lib/button/style.css')
    

    这个components就是依赖的名称,比如element-ui,那它怎么知道引入的是lib目录下的button,而不是其他目录下的button,这个是需要配置.babelrc这个配置文件,接下来以element-ui的按需引入配置进行示例说明。

    element-ui按需引入

    配置.babelrc文件

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

    以下代码,会被转换:

    import {Button,Icon} fron 'element-ui'
    

    会被转换成以下代码

    const Button = require('element-ui/lib/button.js`)
    require('element-ui/theme-chalk/button.css')
    
    const Icon = require('element-ui/lib/icon.js')
    require('element-ui/theme-chalk/icon.css')
    

    其中在引入css的时候,其中的theme-chalk路径是通过.babelrc文件中的styleLibraryName确定的,
    引入js的时候,其中的lib是通过.babelrc文件中的libDir属性决定的,只不过这个属性的默认值是lib;

    接下来看一下,在node_modules中的element-ui的结构,先看js
    在这里插入图片描述
    在这里插入图片描述
    再看css:
    在这里插入图片描述
    在这里插入图片描述
    看package.json中的main:
    在这里插入图片描述
    看完这个结构之后,大家应该明白了,当全引入的时候:

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

    这两句代码,就相当于引入截图中的element-ui.common.js以及theme-chalk/index.css;当按需引入组件的时候,就是分别引入对应组件的js以及css文件,而babel-plugin-component只是帮忙转换了一下语法而已,所以说,按需引入,是需要组件库打包出来的文件支持的,如果element-ui没有分别打包这些组件,那么调用者是无法实现按需引入功能的;

    babel-plugin-import

    因为现在使用vue-cli3脚手架创建的vue工程是使用babel7编译的,babel-plugin-component已经不再适用于babel7,文本将会使用babel-plugin-import实现按需引入的功能。其实babel-plugin-importbabel-plugin-component差异不大,就是做一下语法转换。

    组件分开打包以及全部打包

    刚刚在分析element-ui的打包目录可以知道,当需要按需引入的时候,会分别引入对应组件的js以及css,所以不同的组件都需要打包,所以在webpack配置中,每个组件都需要有一个打包入口。同时还需要有一个总的打包入口,这个入口文件引入所有的组件并且注册

    组件分开打包

    组件库中的组件是非常多的,如果每一个入口文件都是手动在webpack配置文件中维护的话,会非常麻烦,这里设定一个规则,所有的组件都放在某个目录下,这里为components,打包的时候,自动扫描这个目录。自动生成入口配置信息。示例:

    - components
        - button
            - pl-button.vue
            - index.js
        - ele
            - index.js
        - icon
            - pl-icon.vue
            - index.js
        - input
            - pl-input.vue
            - index.js
    

    里面的index.js就是每一个组件的入口文件,组件的入口文件暴露一个install方法,用来注册组件,比如button中的入口文件:

    import Button from './pl-button'
    
    Button.install = (Vue) => Vue.component(Button.name, Button)
    export default Button
    

    当需要按需引入button的时候,可以通过以下方式使用这个组件:

    const Button = require('[button打包之后得到的js地址]')
    Vue.use(Button)
    

    扫描组件入口信息:

    /*build/utils.js*/
    const fs = require('fs')
    const path = require('path')
    const join = path.join
    const resolve = (dir) => path.join(__dirname, '../', dir)
    
    function getComponentEntries(path) {
        let files = fs.readdirSync(resolve(path));
        const componentEntries = files.reduce((ret, item) => {
            const itemPath = join(path, item)
            const isDir = fs.statSync(itemPath).isDirectory();
            if (isDir) {
                ret[item] = resolve(join(itemPath, 'index.js'))
            } else {
            	const [name] = item.split('.')
                ret[name] = resolve(`${itemPath}`)
            }
            return ret
        }, {})
        console.dir(componentEntries)
        return componentEntries
    }
    
    getComponentEntries('components')
    

    得到的结果:
    在这里插入图片描述
    这样就得到的所有组件的入口配置信息;

    组件全部打包入口

    当不需要按需引入的时候,开发者引入的是总的打包文件,这个总的打包文件是通过总的打包入口文件打包而来的,根据上面的组件信息,总的打包入口文件:

    /*src/index.js*/
    import Button from 'components/button'
    import Icon from 'components/icon'
    import Ele from 'components/ele'
    
    const PlainApp = {
        install(Vue) {
            Vue.use(Button)
            Vue.use(Icon)
            Vue.use(Ele)
        }
    }
    
    export default PlainApp
    

    同时,还需要在打包入口中增加总的打包入口文件地址:

    entry:{
        index: resolve('src/index.js'),
    },   
    

    所以,最后的入口信息为:

    entry: {
        ...getComponentEntries('components'),
        index: resolve('src/index.js'),
    },
    

    测试按需引入

    为了测试我们自己创建的组件库能够支持按需引入,我们需要创建一个示例工程,用来测试按需引入是否成功,这里我们使用vuecli3脚手架创建的工程来测试,不过在测试我们自己创建的组件库之前,先测试element-ui的按需引入功能,看看有哪些特性

    1. 创建一个vuecli3工程:
      vue create test-load-on-demend
      
      配置随意,我这里选手动选择特性,只要Babel以及Css Pre-preocessor
      在这里插入图片描述
      然后选择Sass/SCSS,剩下的随意。
    2. 启动测试
      npm run serve
      
      在这里插入图片描述
      一切正常
    3. 安装element-ui
      npm i element-ui -S
      
    4. 在main.js中全部安装element-ui
      import Vue from 'vue'
      import App from './App.vue'
      
      import ELEMENT from 'element-ui'
      import 'element-ui/lib/theme-chalk/index.css'
      Vue.use(ELEMENT)
      
      
      Vue.config.productionTip = false
      new Vue({
          render: h => h(App),
      }).$mount('#app')
      
    5. 在App.vue中使用element的button组件以及input组件,同时去掉App.vue中自带的HellWorld组件,以及删除HelloWorld.vue这个文件,因为不需要这个。
      /*src/App.Vue*/
      <template>
        <div id="app">
          <img alt="Vue logo" src="./assets/logo.png">
          <el-button>hello world</el-button>
          <el-input/>
        </div>
      </template>
      
      <script>
      export default {
        name: 'app',
      }
      </script>
      
      <style lang="scss">
      </style>
      
    6. 启动,勾上这个Disabled cache,在刷新一下页面。
      在这里插入图片描述
      可以看到,app.js的大小为6.7M
    7. 在根目录下创建vue.config.js,配置publicPath./
      /*vue.config.js*/
      module.exports = {
          publicPath: './'
      }
      
      这么做可以使得打包出来的文件,可以通过file协议打打开,查看效果。
    8. 打包页面
      npm run build
      
      在生成的dist目录中,直接打开index.html
      在这里插入图片描述
      同理,打开之后,调出控制台,勾上Disabled cache,刷新:
      在这里插入图片描述
      可以看到,chunk-vendor文件的大小为700多k。
    9. 现在配置按需引入,只要button以及input组件,首先删除根目录下的babel.config.js,新建一个.babelrc文件:
      /*.babelrc*/
      {
        "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
        "plugins": [
          [
            "component",
            {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            }
          ]
        ]
      }
      
      
    10. 安装babel-plugin-component
      npm i babel-plugin-component -S
      
    11. 修改main.js,调整为按需引入组件,只要Button以及Input
      import Vue from 'vue'
      import App from './App.vue'
      
      /*import ELEMENT from 'element-ui'
      import 'element-ui/lib/theme-chalk/index.css'
      Vue.use(ELEMENT)*/
      
      import {Button,Input} from 'element-ui'
      Vue.use(Button)
      Vue.use(Input)
      
      
      Vue.config.productionTip = false
      new Vue({
          render: h => h(App),
      }).$mount('#app')
      
    12. 启动,同样的,查看app.js大小
      在这里插入图片描述
      可以看到,app.js的大小变为2m左右了;
    13. 接下来打包
      npm run build
      
      会稍微感觉到,打包要比上次快了很多,因为只打包了两个组件。打包完之后,打开index.html:
      在这里插入图片描述
      可以看到,chunk-vendor只剩下33k左右,性能上有了巨大的优化。

    组件库按需引入实现

    好了,现在已经准备好了测试工程,准备开始实现我们自己的组件库工程,使得自己开发的组件库工程也有按需引入的功能,下面介绍两种方式创建组件库工程,实现按需引入功能

    • 基于vuecli2创建的webpack工程,基于这个工程开发组件库,并实现按需引入功能
    • 基于vuecli3创建的webpack工程,基于这个工程开发组件,并且实现按需引入功能

    这里为什么要分为两种方式,一个是vuecli2创建的webpack工程,配置可以自主定义,较为灵活,因为webpack的配置文件都暴露出来了;另一个vuecli3创建的工程使用方便,简化了配置文件,同时很方便配置多单页面应用,以及其他打包配置。但是,两个工程实现按需引入功能的方式,却是有很大的差别。

    test-load-on-demand工程地址

    vuecli2创建的组件库工程实现按需引入

    文章地址

    vuecli3创建的组件库工程实现按需引入

    文章地址

    展开全文
  • 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] 通过 npm 安装 npm i vant -S 或者 cnpm ivant -S 安装...

    vue项目使用vant组件库

    vant组件库官网 https://youzan.github.io/vant/#/zh-CN/quickstart

    通过 npm 安装

    npm i vant -S 或者 cnpm i vant -S
    

    安装插件

    npm i babel-plugin-import -D
    

    然后在.babelrc 中添加配置 样式按需加载

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

    这样就可以在组件中按需引入啦

    <template>
       <div>
          <van-button type='primary'>我的第一篇博客</van-button>
       </div>
    </template>
    <script>
    import {Button} from 'vant'
    export default {
      components:{
        vanButton: Button,
      }
    }
    </script>
    

    最后运行时报错 则重新 npm install 或者把 node_modules 删掉重新 npm install

    这是本人,第一次写博客,若存在错误希望指正,后续会继续更新vue移动端项目中使用vant其他组件。

    展开全文
  • 但是在实际项目开发中为了避免项目体积过于庞大,一般都是按需引入组件。 温馨提示: antd 官网有很多版本,别走错了,记住是右上角的---- 更多–> Ant Design of Vue (社区实现) 官网链接:...
  • vue3.0按需引入element-ui组件库

    千次阅读 2020-11-11 18:25:40
    1.引入vue add element How do you want to import Element? -->选择 Import on demand (关键) Choose the locale you want to load–>选择 zh-CN 2.回车后,系统会自动配置引入 babel.config.js main.js...
  • Vue CLI3搭建组件库并实现按需引入实战操作 在Vue CLI3搭建组件库并用npm发布实战操作中介绍了单个组件的组件库怎么开发,本文将一步一步教大家怎么开发多个组件集成的组件库,怎么实现组件库按需引入。觉得有用点...
  • 目前最新的vuecli版本是3,而vuecli3与vuecli2都使用了相同的命令vue,所以vuecli2被覆盖了,如果要使用vuecli2的init命令创建工程,需要安装一个桥接工具:@vue/cli-init 工程地址 ...
  • 主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料,以及介绍了vue引入elementUI报错的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
  • 按需要引入 Mint UI ,有两种情况:  1. 引入全部组件  如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中: ... 按需引入  如果你只需要...
  • 配置按需引入插件 vant npm i babel-plugin-import -D element npm install babel-plugin-component -D babel.config.js module.exports = { presets: ["@vue/cli-plugin-babel/preset"], "plugins": [ ...
  • 平时在项目中实现数据可视化,可以使用百度的开源图表echarts,根据项目需求来绘制生成...因为通过vue-echarts按需引入时,一些组件模块(如折线图、柱状图,提示框和标题组件等)需要依赖已经包含所有图表和组...
  • 上一篇我们讲解了Vue UI的PC端框架ElementUI,以及一些使用实例,本篇我们来讲解如何按需引入ElementUI。 本系列博文使用的Vue版本:2.6.11 Element UI 官方网站:https://element.eleme.cn/#/zh-CN 一、如何按需...
  • 全局引入 安装依赖 npm install element-ui -S main.js中引入 全局完整引入 ...import ElementUI from 'element-ui';...import 'element-ui/lib/theme-chalk/...按需引入功能依赖于 babel-plugin-component 插件完成...
  • Vue项目按需引入Vant组件

    千次阅读 2020-01-15 14:08:21
    1.安装Vant ...按照官网上写的,安装babel 插件后,就能在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 官网上说在.babelrc 中添加配置 { "p...
  • 主要介绍了vue项目引入Iconfont图标的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vant 是有赞前端团队开源的移动端组件库,此文记录vue移动端项目自动按需引入vant组件库方法,此方法也是官方推荐方法。 二、使用步骤 1.安装 //命令行执行安装 yarn add/npm/cnpm i vant -S 2.自动按需引入组件...
  • 主要介绍了vue组件内部引入外部js文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 选择全局还是按需引入-全局 Do you wish to overwrite Element's SCSS variables? Yes 是否使用SCSS-是 Choose the locale you want to load zh-CN 选择语言-中文 3, Successfully invoked generator for ...
  • 方式一: 自动按需引入组件 (推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。 1、安装babel-plugin-import插件 npm i babel-plugin-import -D 2、...
  • vuecli3 element按需加载按需引入(包括样式)

    万次阅读 多人点赞 2019-06-26 11:42:35
    自从前后端分离之后,大部分时间都是在用weui(we-vue组件库)的css样式做公众号等前端网页开发。 近期公司准备为统一用户项目做一个管理控制台,我就准备用Vue + [element-ui](https://element.eleme.io/)做框架进行...
  • 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-...
  • 需求 就是有一个组件库,需要根据接口所传的组件类型按需引入生成页面 //模板 <template> <div class="hello"> <component v-for="(item,index) in componentArr" :key="index" :is="item.type" :...
  • import {mc} from 'mycom-vue3'//引入组件库 import 'mycom-vue3/lib/mycom-vue3.css';//引入CSS样式文件 createApp(App).use(mc).mount('#app') 使用样例 直接在页面中使用组件,如下定义一个轮播图 mc-tab表示轮播...
  • Ant-design、Element 这些框架都有按需引入组件的功能。需要使用哪个组件,就...跟着我下边的步骤,相信大家也能搭建出一个按需引入组件库。 创建一个 Vue 项目 vue create ui-demo 复制代码使用默认配置安装就 OK
  • 下面我们就从0开始来打包一个vue组件库。 使用vue组件库的常见方式 1、通过script标签引入 <body> <div id="app"> <hello></hello> </div> </body> &
  • 一、按需引入 npm install babel-plugin-import --save-dev // .babelrc { “plugins”: [[“import”, { “libraryName”: “view-design”, “libraryDirectory”: “src/components” }]] } // main.js 可以...
  • 一、安装babel-plugin-component: npm install babel-plugin-component -D 二、babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], plugins: [ [ "compone...
  • vue3按需加载第三方组件库

    千次阅读 2021-05-30 22:41:33
    vue3按需加载第三方库组件前言环境安装 Element Plus完整引入按需加载安装 vite-plugin-importer 插件安装配置安装 vite-plugin-style-import安装配置总结 前言 以 Element Plus 为例,配置按需加载组件和样式。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,632
精华内容 13,052
关键字:

vue组件库按需引入

vue 订阅