精华内容
下载资源
问答
  • 有一点需要注意的是,平时在Vue项目里,组件的name可以不写,但如果要打包成库组件的name必须写。为了描述方便,我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下: <template> <div> &...

    一、开发组件

    开发组件的过程并无特殊之处,跟平时在Vue项目里定义component是一样的。有一点需要注意的是,平时在Vue项目里,组件的name可以不写,但如果要打包成库,组件的name必须写。为了描述方便,我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下:

    <template>
      <div>
      </div>
    </template>
    
    <script>
    export default {
      name: "MyCom1",
    };
    </script>

    二、定义install方法

    Vue引用组件使用Vue.use方法,此方法会调用组件的install方法,所以需要定义组件的install方法。可以在项目中新建一个文件夹,例如命名为lib,然后在此文件夹中添加各个组件的install方法定义。例如,新建MyCom1Install.js,内容如下:

    import MyCom1 from "../src/MyCom1.vue";
    function install(Vue) {
        Vue.component(MyCom1.name, MyCom1);
    }
    export default install;

    三、定义打包入口文件

    当有多个组件时,需要有一个入口文件引用这些组件。例如,同样在lib文件夹下,添加一个lib.js,内容如下:

    export { default as MyCom1 } from "./MyCom1Install";
    export { default as MyCom2 } from "./MyCom2Install";

    四、package配置

    package配置需要做两件事件,但首先,我们要确定这个包的名称,例如为mycom。生成lib的脚本如下所示:

    vue-cli-service build --target lib --name mycom lib/lib.js

    完成之后,在工程的dist文件夹下,将生成以下文件:

     这些文件有不同的应用场合,我们需要用到的,其实就只有.umd.min.js和.css两个文件。由于有多个文件,需要在package中指明我们要用的是哪个,所以需要在package中加入:

    "main": "dist/mycom.umd.min.js",

    package完整修改内容如下:

    {
      "name": "mycom",
      "version": "0.1.0",
      "private": true, //如果要上传npm,就为false
      "main": "dist/mycom.umd.min.js",
      "scripts": {
        "build:lib": "vue-cli-service build --target lib --name mycom lib/lib.js"
      },
      ...其他无关内容
    }

    五、打包

    打包的话就没什么好说的了,

    yarn build:lib 或者

    npm run build:lib

    结束之后,可以上传到npm,也可以复制相关内容到需要引用组件项目的node_modules文件夹中。如果要复制,需要复制以下内容:

    mycom
      package.json
      dist
        mycom.umd.min.js
        mycom.css

    六、使用组件库

    在main.js中,加入对组件的引用:

    import { MyCom1,MyCom2 } from "mycom";
    import "mycom/dist/mycom.css";
    
    Vue.use(MyCom1);
    Vue.use(MyCom2);

    然后在Vue页面中,像其他组件一样引用即可:

    <template>
      <div id="app">
        <MyCom1 />
        <MyCom2 />
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
    };
    </script>

    展开全文
  • 完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目。 一、修改配置 1、解决文件路径问题: 打开项目根目录config文件夹下的index.js文件,进行如下修改: 看清楚是 build(上边...
  • 把packages处理成vue插件 基本配置 1、目录调整 2、vue.config.js配置 3、install方法 4、打包组件库 组件库上传GitHub 1、处理README.md文件 2、在package.json文件中声明项目作者信息 3、上传GitHub 4、...

    目录

    把packages处理成vue插件

    基本配置

    1、目录调整

    2、vue.config.js配置

    3、install方法

    4、打包组件库

    组件库上传GitHub

    1、处理README.md文件

    2、在package.json文件中声明项目作者信息

    3、上传GitHub

    4、添加远程仓库

    组件库上传npm

    1、配置package.json

    2、配置.npmignore文件

    3、注册npm

    4、上传到npm

    5、将组件库下载到本地

    6、使用vue-green-ui


    把packages处理成vue插件

    基本配置

    1、目录调整

    重新创建一个vue项目,使用了开始已经创建保存过的预设green-ui

    在根目录下创建两个文件夹packages和examples

    • packages:用于存放所有的组件
    • examples:用于进行测试

    把将之前写好的组件以及字体图标copy放入到packages中,把fonts放到packages中,将App.vue和main.js放到examples路径下。组件库一般是不需要examples文件夹的,是为了以后设计新的组件时便于测试。同时将原来的src目录删除掉。

    2、vue.config.js配置

    在项目的根目录下创建vue.config.js文件,并通过entry属性配置入口文件,即examples目录下的main.js文件。

    vue.config.js内容如下:

    const path = require('path')
    module.exports = {
      pages:{
        index:{
          // 修改项目入口文件
          entry:'examples/main.js',
          template:'public/index.html',
          filename:'index.html'
        }
      },
      // 扩展webpack配置,使webpages加入编译
      chainWebpack: config => {
        config.module
        .rule('js')
        .include.add(path.resolve(__dirname,'packages')).end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => {
          return options
        })
      }
    }

    3、install方法

    是把组件当作插件处理,所以安装vue.js插件,如果插件使一个对象,那么必须提供install方法。

    在packages目录下,新建一个index.js文件,用于声明install对象。

    步骤如下:

    1. 我们将所有的组件和字体图标引入到index.js文件中
    2. 声明conpoments数组,将组件全部放到这个数组中
    3. 定义install方法,在Vue中注册所有的组件
    4. 判断是否直接引入了文件,如果引入了,则不需要调用Vue.use()方法
    5. 导出install对象
    // 整个包的入口
    /**
     * 1.将所有的组件和字体图标引入到index.js文件中
     */
    import Button from './button'
    import Dialog from './dialog'
    import Input from './input'
    import Switch from './switch'
    import Tag from './tag.vue'
    import './fonts/iconfont.css'
     
    /**
     * 2.声明conpoments数组,将组件全部放到这个数组中
     */
    const components = [
      Button,
      Dialog,
      Input,
      Switch,
      Tag
    ]
    
    /**
     * 3.定义install方法,在Vue中注册所有的组件
     */
    const install = function (Vue) {
      // 注册所有的组件
      components.forEach(component => {
        Vue.component(component.name, component)
      })
    }
    
    /**
     * 4.判断是否直接引入了文件,如果引入了,则不需要调用Vue.use()方法
     */
    if (typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }
    
    /**
     * 5.导出install对象
     */
    export default {
      install
    }

    如果以后有新的组件加入,直接导入然后添加到组件数组即可。

    4、打包组件库

    可以使用vue-cli打包组件库,在官方文档中可以找到相应的打包命令:

    vue-cli-service build --target lib

    在package.json中的script标签下添加该条指令,并且命名为lib,需要注意的是,我们需要在打包指令后面加上需要打包的路径,这里我们指定为 packages/index.js 。

    接着在终端中,跳转该项目目录下,执行npm run lib命令对packages/index.js指定的组件进行打包。

    如果没有报错则会打包成功,如果报错的话就根据提示解决错误再运行上述命令

    打包成功会在根目录下生成一个dist文件夹,里面的内容如下:

    在dist路径下我们看到有多个js文件,这是因为打包生成了多种js规范的文件。

    组件库上传GitHub

    1、处理README.md文件

    README.md对该项目的使用作简单说明

    2、在package.json文件中声明项目作者信息

    3、上传GitHub

    必须先要有一个GitHub账号,这部分不做多述。

    新建一个green-ui仓库

    创建仓库成功

    然后在green-ui目录下右键单击出现git面板

    第一步:使用git status查看文件状态

    第二步:使用git add . 命令添加路径下文件

    第三步:使用git commit -m '提交组件' 命令上传

    4、添加远程仓库

    git remote add origin https://github.com/你的用户名/green-ui.git
    git push -u origin master

    第一次提交需要输入密码

    然后在GitHub上查看,就知道已经上传成功了

    组件库上传npm

    1、配置package.json

    • 如果想把包发布到npm上,package.json中的private必须为fasle,我们需要将其设置位公有的包:"private": false,
    • 并且name必须为npm上没有的包,否则不能上传(可以先去npm官网搜索name属性指定的包名是否有重复,如果重复了请修改包名,否则上传的时候会报错,而本例中green-ui是重复了,后面修改成了vue-green-ui,但green-ui.css等文件的名字却没有改变,所以要注意导入名字的变化)
    • 同时我们可以指定入口文件  "main": "dist/green-ui.umd.min.js"

    2、配置.npmignore文件

    在根目录下创建一个.npmignore文件。

    这个文件的作用和.gitignore文件作用类似,都是将一些不需要上传的文件路径进行忽略。

    由于是提供的组件库,已经把项目打包好了,只需要上传打包文件,不需要上传源码,故配置如下:

    # 忽略目录
    examples/
    packages/
    public/
     
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map

    3、注册npm

    如果要上传项目到npm,需要npm账户,但目前我还没有,所以需要进行注册。

    进入NPM官网,通过验证,然后进行注册

    创建账户成功

    4、上传到npm

    使用npm login命令登录npm账户

    接着使用npm publish命令上传

    (注意:由于name属性指定的报名在npm已经存在,所以修改了package.json中的name属性值,因此下面的名字已经由green-ui变为了vue-green-ui了。)

    上传成功,在npmjs官网搜索name属性指定的包名就可以找到上传成果了

    5、将组件库下载到本地

    打开终端,跳转到某个vue项目目录下,然后运行npm add vue-green-ui命令,添加vue-green-ui到模块中

    然后在node_modules目录下可以看到下载成功的vue-green-ui了

    6、使用vue-green-ui

    首先在main.js文件中导入vue-green-ui及相关样式。

    import GreenUI from 'vue-green-ui'
    import 'vue-green-ui/dist/green-ui.css'
    
    Vue.use(GreenUI)

    然后在App.vue中使用该组件

    运行vue项目,查看使用效果

    到此为止,组件的封装就告一段落了。

    展开全文
  • 今天一个vue项目,我引的是elementUI组件库,首先 npm install element-ui -S 下载完成后 main.js文件中引入elementUI,并使用这个组件库 然后写了一个测试组件,看看elementUI是否引入成功了 但是出来是这种...

    今天做一个vue项目,我引的是elementUI组件库,首先
    npm install element-ui -S
    下载完成后
    在这里插入图片描述
    main.js文件中引入elementUI,并使用这个组件库
    然后写了一个测试组件,看看elementUI是否引入成功了
    在这里插入图片描述
    但是出来是这种效果
    在这里插入图片描述
    很明显能看出来引入elementUI中的组件并没有起作用,我又看了一遍引入的代码并没有问题,感觉代码真的是玄学。无意中瞅到了Vue.config.productionTip = false
    在这里插入图片描述很明显这是要关闭一些配置,网上看了一些说这个东西是"设置为开发环境或者生产环境",我马上把这个东西设为true,Vue.config.productionTip = true,然后保存,重新访问
    在这里插入图片描述
    运气有点好。然后我又把Vue.config.productionTip 这个东西设成了false,Vue.config.productionTip = false,保存查看这个页面也没变回去,但是发现单选框不能选择,于是乎我再把Vue.config.productionTip变成了true,Vue.config.productionTip = true 发现单选框也可以选了。
    具体原因我也不知道是为什么,希望可以帮到你。

    展开全文
  • 1.vue项目中创建一个loading.vue组件 2.去jquery插件选择自己想要的css3动画,下载好后,将压缩包内的html和css部分粘贴到loading.vue中 例如 使用: <loading v-if="isLoading"></loading> //在需要的...

    项目中需要将doc文件等渲染成pdf在前端展示给用户,但是doc文件如果太大,渲染需要时间,这时候就需要加入一个加载动画,
    在这里插入图片描述
    在这里插入图片描述
    1.vue项目中创建一个loading.vue的组件
    2.去jquery插件库选择自己想要的css3动画,下载好后,将压缩包内的html和css部分粘贴到loading.vue中
    例如在这里插入图片描述
    使用:

    <loading v-if="isLoading"></loading>    //在需要的地方使用
    import Loading from '@/components/common/loading'   //引入自己定义loading的组件
    export default {
    	return {
    		isLoading: true,
    	},
    	components:{
            Loading
        },
    },
    //然后在pdf页面渲染完了之后 调用下面的就行了
    this.isLoading = false 
    
    展开全文
  • 基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何一个初步的组件。下篇:编写说明文档及页面优化。开工。 GitHub源码地址:https://github.com/sq-github/sq-ui GitHub预览地址...
  • 项目总结 一、项目名称 电商网站webapp开发 二、技术栈 REM布局:rem(font size of the root element)是指相对于根元素的字体大小的单位。移动端布局主要采用REM布局,结合Flex布局,bootstrap布局等集中布局方式...
  • 自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点:1. 如何发布一个包到npmjs仓库上2.如何引用一个npm包,尤其是...
  • 1.项目1 打包 需要修改的文件: build文件夹中webpack.base.conf.js文件 output: { path: config.build.assetsRoot, filename: '[name].js', publicPath:"./" //这行是修改后的,注释掉的是原代码 // ...
  • 本文将略过安装Vue CLI3、搭建组件库的项目、清洁组件库项目的步骤,不懂的地方可以看Vue CLI3搭建组件库并用npm发布实战操作 一、建立两个git仓库放本文的示例代码 组件库 引用组件库demo 二、组件库项目中...
  • 因为本文主要是讲如何把一个vue组件做成npm包并发布。 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时、有其固定的格式一样)。 二.发布到npm上的流程 一、书写一个vue组件 不用脚手架,...
  • 开发的时候偶尔会一些小型工具,在构建项目的时候不想引入一个庞大的组件库。只想按需加载自己需要的组件。 采用了Element-ui的组件库,发现它可以实现按需加载,因此对他进行了浅入的剖析。 他采用了一个...
  • UI组件:Vant移动端Vue组件库 安装:npm install vant -S 项目中引用的部分组件: 1、Tabbar标签栏:封装底部标签栏,引入到其他组件中,导入路由,在底部作为导航栏使用; 2、Sidebar,SidebarItem 侧边导航:...
  • Vue CLI3搭建组件库并用npm发布实战操作 在公司项目逐渐多起来的情况下,公共组件也多起来。不想每一次修改一下公共组件,都要去每个项目中修改。这时候你就该学会用Vue CLI3 搭建组件库并用npm发布了,本文以基于...
  • 在要使用进度条的组件中添加“”导入: import StepProgress from 'vue-step-progress' ; // import the css (OPTIONAL - you can provide your own design) import 'vue-step-progress/dist/main.css' ; // .....
  • 解决思路: 把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包他上次到管理npm 1.首先你要把你的想打包的项目写完,或者不会报错情况下进行。  修改你项目主目录下的...
  • 创建vue项目 创建组件组件全局化 package.json添加入口文件 "main": "src/components/index.js", "typings": "src/components/index.js", 引入名和项目名一样 引入 "study_note": "git+...
  • 项目源码 ...当然项目少还好,假如项目多一些,我们真就了“拧螺丝”的螺丝工。当然这种场景很常见,在各大框架或者各大语言都有解决方案,我们今天就聊聊vue项目的使用场景。 调研 vue的开发者都了解vue
  • vue进阶】打造自己的 UI 组件库

    千次阅读 2020-09-28 08:41:59
    内容 组件的基本封装思路 把封装的组件发布到 npm
  • vue个人自定义组件库

    千次阅读 2020-03-23 21:18:15
    组件库1.0 select 1. v-select-duration(时长) 链接:v-select-duration(1.0) 效果图: 2. v-select-interval(时间段) 链接:v-select-interval(1.0) 效果图: 3. v-select-company(部门/员工) 链接:v-select-...
  • 组件写的多了,可以把通用的组件单独抽离一个组件库,供别的项目或者其他人使用。 文章链接:https://justforuse.github.io/blog/zh-cn/2019/05/create-vue-plugin/ 文章主要介绍了: 如何制作自己的Vue组件库 一...
  • 封装Vue组件库

    2020-12-10 20:53:45
    很多项目都会用到界面和功能相似的组件,为了能在不同项目中最大程度重用组件,所以会进行组件库开发,以提供不同项目基础的组件 开源组件库 Element-UI iView 组件驱动开发CDD Component-Driven Development ...
  • vue项目|多工程共用相同组件思路

    千次阅读 2020-12-10 18:20:19
    简单介绍一下目前的项目场景,目前我们有三个vue工程,就是三个vue项目,但是每个项目都有自己的基础组件库,但是这些自己封装的组件库都一样,都是CV过去的,但是现在产品不稳定,这些基础的组件库可能会总改,那么...
  • 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了. 我写这遍文章的目的:记录自己搭建UI库的...
  • vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue <template> <div> 我是组件 </div> </...
  • Vue 将 IconFont 封装成组件

    千次阅读 2019-05-30 17:21:22
    SvgIcon.vue <template> <svg class="icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script > export default { ...
  • 本次手把手记录的是一个vue3的给dom生成水印的指令,这里把他封装一个组件,下一次直接拉下来就可以使用。这个可以用在移动端或者是pc端上防止数据被人截屏。效果如下: 源码仓库:github.com/cll123456/v… ...
  • vue组件做成npm包发布 项目新建 创建新项目cuttle:vue create cuttle 修改项目结构及配置文件: 修改src文件为examples,根目录下新建配置文件vue.config.js,并重写配置vue.config.js文件内容如下: module....
  • 前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或...  这里主要讲一下搭建一个vue组件库需要事先准备的条件,其实也是一个合格的初级前端开发人员的必备条件。 编辑器工具: VsCo

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,552
精华内容 9,020
关键字:

vue项目做成组件库

vue 订阅