精华内容
下载资源
问答
  • 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 
    
    展开全文
  • 组件写的多了,可以把通用的组件单独抽离一个组件库,供别的项目或者其他人使用。 文章链接:https://justforuse.github.io/blog/zh-cn/2019/05/create-vue-plugin/ 文章主要介绍了: 如何制作自己的Vue组件库 一...

    组件写的多了,可以把通用的组件单独抽离成一个组件库,供别的项目或者其他人使用。

    文章链接:https://justforuse.github.io/blog/zh-cn/2019/05/create-vue-plugin/

    文章主要介绍了:

    演示地址:https://codesandbox.io/s/24jx3zz2ny

    欢迎issue和PR,项目地址:https://github.com/justforuse/functional-button

    展开全文
  • <div><h1>Vue.js 组件库 Rubik UI 开发心得总结 <p>Rubik UI 是一套基于 Vue 2.0 和 Material Design 开发的桌面端、移动端组件库 开发目的 因为公司内部系统开发的越来越多,而却同事们的要求也越来越高ÿ...
  • 解决思路: 把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包他上次到管理npm 1.首先你要把你的想打包的项目写完,或者不会报错情况下进行。  修改你项目主目录下的...

    首先问题:开发中我们往往需要做某些功能,这个功能可能会出现很多次,也会出现在不同的项目。需要使用时候又不想重新写,怎么办呢?

    解决思路:  把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包他上次到管理库npm

    1.首先你要把你的想打包的项目写完,或者不会报错情况下进行。

    1.    修改你项目主目录下的package.json文件在文件添加一个程序的入口配置 如图:还有记得修改private 为 false

          2.修改项目目录 -》bulid -》webpack.prod.conf.js文件 如图:

            需要注意的 libraryTarget 的umb 是写死的,原因是什么,可能要问npm官方了。

        3.第三步。修改 config -》index.js 文件 如图

         

     

    第4步。修改main.js  在此文件中添加你的功能组件并export导出

    /* 封装的功能组件 */
    import VueHzf5Package from './components/divImgBox.vue'
    
    /* 导出 */
    export default VueHzf5Package

     

    第5步.现在所有配置修改该的地方已经差不多,那么我们可以进行打包了。命令:

     npm  run  build 

     

     

     打包成功后这样。注意检查是否打包成功,

    6.最后一步.发布到npm上。首先先登录并邮箱验证:命令
       npm  login  回车。

       之后输入你的账号、密码、邮箱。(如果没有账号则去npm官网注册很简单:官方网站

     

     

    登录成功后就可以上次你的组件了  命令:npm publish

     

    呐。大功告成。我的web520项目 1.0版本成功上传上去了。注意上传成功,需要10分钟后才能下载应用使用

     10分钟后去别的项目引用 指令 :npm install --save-dev web520  (web520是你上传后的包名)

     之后就在你项目main.js improt 导入进来当组件使用吧。

     谢谢。大佬观看,有问题请下面评论反馈谢谢。

    展开全文
  • 项目里自己封装了一些常用组件,但要是 新启项目 还得手动复制过去。尝试着能不能 像mint-ui似的,封装...本例使用的是 项目 自带的 helloworld 组件,本身不用改动。主要是一些配置文件的更改。 a、package....

    项目里自己封装了一些常用组件,但要是 新启项目 还得手动复制过去。尝试着能不能 像mint-ui似的,封装成npm包, 以后直接使用npm安装,肯定方便多了。

    开干吧!!!

    1、尝试封一个普通组件 上传到npm

    使用vue-cli 创建一个 基础项目。

    1、组件改装

    本例使用的是 项目 自带的 helloworld 组件,本身不用做改动。主要是一些配置文件的更改。

    a、package.json文件

    "name":"zha-vue-npm",
    "private":false,//公开项目
    "license":"MIT",//开源协议
    "main":"dist/hello-world.min.js",//打包后的入口文件

    b、webpack.prod.config.js文件

    修改output配置 和 css 文件名称配置

    // 固定的文件名称
      output: {
        path: config.build.assetsRoot,
        publicPath: config.build.assetsPublicPath,
        filename: 'hello-world.min.js', 
        library: 'HelloWorld',
        libraryTarget: 'umd'
      },
      optimization: {
        splitChunks: {
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'all'
            },
            manifest: {
              name: 'manifest',
              minChunks: Infinity
            },
          }
        },
      },
      plugins: [
        new webpack.DefinePlugin({
          'process.env': env
        }),
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: true
        }),
        new MiniCssExtractPlugin({
          // 固定的css文件名称
          filename: utils.assetsPath('hello-world.min.css'),
          allChunks: true,
        }),

    c、config/index.js文件

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: '/', // 跟js文件同级
        assetsPublicPath: '/',

    d、main.js 文件

    将该组件导出

    import HelloWorld from './HelloWorld.vue'
    export default HelloWorld;

    e、.npmignore 文件:忽略 上传到npm上的文件。没有就新建

    .DS_Store
    node_modules/
    build/
    config/
    static/
    .babelrc
    .editorconfig
    .gitignore
    .npmignore
    .postcssrc.js
    index.html
    package-lock.json
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    
    #Editordirectoriesandfiles
    .idea
    .vscode
    *.suo
    *.ntvs*
    *.njsproj
    *.sln

    2、打包发布

    • npm run build 打包
    • 登录npm账号,进行发布

    npm账号注册地址:https://www.npmjs.com

    参考命令:

    npm login //登录npm 
    npm publish //发布包 
    npm unpublish //删除包

    注意事项:

    此处需要将 将淘宝镜像 还原。否则 发布、安装 都出问题。
    // 查询当前配置的镜像 npm get registry //https://registry.npmjs.org/ 
    // 设置成淘宝镜像 npm config set registry http://registry.npm.taobao.org/
    // 换成原来的 npm config set registry https://registry.npmjs.org/

    另外,每次发布 需要 修改 package.json 里的 version。
    还需要注意是否包名(package.json 里的 name)冲突,npm 平台已存在的话 不让上传。

    3、使用

    npm i zha-vue-npm (package.json 里面的name)
    
    import HelloWorld from'zha-vue-npm'
    import Css from'zha-vue-npm/dist/hello-world.min.css' // 样式这么导入

     


     



     

     

    我们已经完成了一个单一组件的打包发布。休息一下,接下来 弄我们自己的组件库。

    2、多组件的封装、使用

    参考链接:https://segmentfault.com/a/1190000015884948#articleHeader1

    目标:

    弄成 像mint-ui那样,可以全局安装所有,也可以 按需安装部分组件

    难点:

    按需加载

    按需加载实现原理:

    利用 babel-plugin-component 插件,来实现按需加载。该插件需要的是 这样一个文件结构

    实现过程:

     项目仍然是 vue-cli 搭建的基础项目。

    1、新建 components.json 文件(webpack 入口文件列表)

    2、config/index.js文件中将assetsRoot,output的路径设置为lib

    3、webpack.prod.conf.js 文件配置

    • 删除HtmlWebpackPlugin相关配置,这里只需打包为js文件和css文件,不涉及html

    • 引入components.json,根据配置的模块及路径配置入口entrys,配置完后,将入口写入entry配置

     

    • output中,出口.js文件的名称不能写死

    • plugins中,ExtractTextPlugin相关配置 设置为'/theme/[name].css'  指定css 存放目录 lib/theme

     4、package.json 文件配置

      "name": "vue-zyby-ui",
      "version": "0.0.15",
      "description": "A Vue.js project",
      "author": "zha <675486943@qq.com>",
      "private": false,
      "license": "MIT",
      "main": "lib/app.js", // 入口文件

    5、main.js 导出组件

    import AWord from './components/AWord.vue';
    import Back from './components/Back.vue';
    
    // install 是 用来全部安装的关键
    const install = function(Vue) {
      if (install.installed) return;
      Vue.component(Back.name, Back)
      Vue.component(NoData.name, NoData)
    };
    
    export default {
      install,
      AWord,
      Back,
    };

    使用:

    导入全部组件.
    
    ```javascript
    import Vue from 'vue';
    import zybyUi from 'vue-zyby-ui'
    import 'vue-zyby-ui/theme/index.css'
    
    Vue.use(zybyUi);
    ```
    
    导入指定组件. (用到 babel-plugin-component)
    ```javascript
    import { CallPhone, NoData } from 'mint-ui';
    
    Vue.component(CallPhone.name, CallPhone);
    Vue.component(NoData.name, NoData);
    ```
    
    
    ## babel-plugin-component
    
    安装
    
    npm i babel-plugin-component -D
    
    配置.babelrc
    ```javascript
    
    {
    "libraryName": "vue-zyby-ui",
    "camel2Dash": false,
    "styleLibrary": {
    "name": "theme",
    "base": true
    }
    },
    ``` 
    ## 注意事项 部分组件css 使用了rem单位,以适配移动端。因此 使用本组件库前,所在项目应 进行适配改造。
    改造所用库: lib
    -flexible 和 postcss-px2rem-exclude ,参见以下链接 https://www.cnblogs.com/skylineStar/p/10036525.html

    遇到的问题:

    1、按需加载时,组件间 有一些公共样式

    利用  babel-plugin-component 的配置属性 ,base : true。可以设置一个base.css 基础样式,按需加载时 会自动引入。
    注意  不要把 全部安装 和 按需安装 混用,否则  base.css  读取不到。

    难点主要是 base.css 文件的生成,由于 webpack 无法单独生成css文件(要依赖js)。这里 我新建了一个 base.js 文件,也作为了一个 webpack 的入口文件。

    base.js
    // 仅仅是用来 生成 base.css 文件
    import './assets/css/base.less'

    在 components.json 里 引入 base。此时文件目录如下

     

    转载于:https://www.cnblogs.com/fan-zha/p/10917675.html

    展开全文
  • 解决思路:把这个特殊的需求功能做成属于自己的组件,当下次需要去使用它的时候。那么我们就可以打包这个组件并上传到npm管理,这个可以是自己的私有,也可以是npmjs公共。如何创建自己的私有npm服务器,详见...
  • vue如何使用mixinUI

    2021-04-19 20:48:04
    什么是mixin 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。...为了项目整体同一,并且高复用,就需要把button抽离一个组件。 /src/App.vue 可以使用mixin,将button组件引入即可 /src/
  • 项目中需要用到switch这个开关组件,但是又不想用太重量级的组件库了,加载量太大,没必要,所以自己定制了一个,借鉴了一下we-ui的样式。很简单的几行代码,大家可以自己修改样式。PS:有些东西光靠想可能觉得比较...
  • vue自定义组件 - switch

    2018-04-04 05:07:21
    项目中需要用到switch这个开关组件,但是又不想用太重量级的组件库了,加载量太大,没必要,所以自己定制了一个,借鉴了一下we-ui的样式。很简单的几行代码,大家可以自己修改样式。 PS:有些东西光靠想可能觉得比较...
  • 并且现在有很多优秀的组件库供我们使用,但是在公司的项目里,所有的主题色都是深色系,因为我们是给GA项目,想要把这些组件修改统一的风格,那就要大费周章了(其实就是想要自己的组件库),那干脆我们动手...
  • 文中会讲述我从0~1搭建一个前后端分离的vue项目详细过程 <p>Feature: * 一套很实用的架构设计 * 通过 cli 工具生成新项目 * 通过 cli 工具初始化配置文件 * 编译源码与自动上传CDN * Mock 数据 * 反向检测...
  • 之前用Vue做了一个基础的组件 ...上传文件很多项目都要用到,一些组件库里(ele/iview...) 文件上传组件 都是做成了标配,虽然 vii 和 uploader 定位还是有些差别,但实现上都有几个共同要点: 样子要好看点
  • 引言 有在移动端实现光滑曲线图的需求,选择了AntV的,但官方文档不太行网上案例更少,找起来很麻烦。就把自己的记录下来 ...项目vue的,封装了一个组件,在别的地方可以直接用,使用如下 <line-chart t...
  • 创建单页应用,我们的单页应用只路由切换,组件拼凑的页面映射路由 路由是我们单页应用的核心插件 状态管理vuex 状态管理,可理解为全局数据集中地 推荐小项目尽量别用vuex,会显得有点繁琐,bus总线...
  • 比如说,第一个组件多半是 Grid,CSS 能搞定的事情为什么要做成组件?前端本来就是 HTML/CSS/JS 的集合,我们理应把合适的技术用在合适的地方。所以我希望做这样一场 Chat: 以 Bootstrap 为基础 对其进行有限的...
  • 一、背景   目前公司的电子合同采用表单设计器+合同业务配合实现,了半年多后终于上线,但是... 表单设计器作为基础服务,打包组件库,嵌入到合同项目,包括合同生成组件(拖拽生成合同模板)和合同预览组件
  • 如果你想在多个项目中使用同一个, 或者想将其分享给其他人, 可以将其写一个插件: <pre><code> import MyLibraryPlugin from 'my-library-plugin'; Vue.use(MyLibraryPlugin); </code></pre> 在应用的...
  • VUE面试题

    2021-04-07 21:15:31
    本博客持续更新中… ...渐进式指的是先使用Vue的核心,然后再根据需求逐渐增加所需要的插件,慢慢的组织自己的项目,我们在使用过程中主张最小化,Vue没有强主张,插件使用比较灵活,也就是没有职责之外的事
  • 组件的原则就是尽量将复杂的UI布局划分单个小的UI组件,逻辑处理也被划分更多的单个小的逻辑。数据流动采用的单向数据流动。子组件的数据更多的是来自于父组件,父组件的数据主要是其本身发起的ajax请求。本项目...
  • 造轮子的目的: 做项目的时候需要一个滚动监听...后来想想反正还差没多少还不如完善完善做成插件吧。 结果花了两天多。。 先看效果 主要的坑: 滚动的动画效果,抄袭了 vue-scrollactive的做法,用到bezier-e...
  • Vue.js+Socket.io+Koa2...萝卜青菜各有所爱,本项目采用的是Vue.js前端页面展示,大家完全可以换自己别的喜欢的,React、Angular等等,每个框架都有可取的地方,这里不多说下面扯到正题上## 预览在线预览地址: ...
  • 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库。 ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors
  • Vue题库

    2020-11-15 16:46:54
    1.Vue是什么?   Vue是一套用于构建用户界面的渐进式框架。...组件化就是可以将页面和页面中可复用的元素都看做成组件,写页面的过程,就是写组件,然后页面是由这些组件“拼接“起来的组件树。 数
  • Vue工程打包优化

    2020-12-26 18:45:36
    结合Vue的异步组件和Webpack的代码分割功能(Code splitting)</a>,可以轻松实现路由组件的懒加载;另外,在Webpack 2中,我们可以使用动态import语法来定义代码分块点。结合...
  • 今天做vue项目中,需要将时间戳转换普通日期的格式,于是想到两种方式去实现,记录在此,方便日后有需要时,直接复制粘贴 方法一: 1、运行 npm install moment --save 或者 yarn add moment 安装 moment 插件 2、...
  • 创建单页应用,我们的单页应用只路由切换,组件拼凑的页面映射路由 路由是我们单页应用的核心插件 状态管理 vuex 状态管理,可理解为全局数据集中地 推荐小项目尽量别用vuex,会显得有点繁琐,bus总线程机制...
  • 整体打包组件并发布到npm

    千次阅读 2020-10-24 23:26:54
    这一步并不是说要现在来,你也可以在所有组件开发之后,再来打包组件库 上传。 难点: 自定义打包功能 npm包发布 [把组件代码打包] 在vue-cli脚手架工具中,当你运行 vue-cli-service build 时,你可以通过 --...

空空如也

空空如也

1 2 3 4 5 6
收藏数 104
精华内容 41
关键字:

vue项目做成组件库

vue 订阅