Vue项目组件化工程开发实践方案

我们暂时给提取出来的脚手架取名叫vde-cli，通过vde-cli脚手架生成的组件库工程目录结构如下：

核心功能

组件库

工程的packages文件夹就是用来存放组件库里面的各种组件了，这里不需要通过手动创建文件的方式创建组件，直接通过一条创建组件的命令完成。每个组件都有一个单独的组件文件夹，组件文件夹下都至少包含"index.vue"，"example.vue"，"readme.md"这三个文件，这几个文件都是通过创建组件传递的参数加指定的模板生成，创建组件的命令如下：

npm run generate <componentName> <componentTitle>

两个参数分别是组件的名称和后面用来在文档和例子工程里显示的导航名称。

组件库的对外主文件是工程的src/index.js，只要是通过上面的命令创建的组件，这个文件都会自动更新（省去你手工更新的时间）

Doc文档工程

Doc文档工程就是用来展示你组件文档的一个小型单页面系统。组件的文档就是存放在每个组件文件夹下的readme.md文件，我们通过vue-markdown-loader去解析这个文件变成一个vue组件也页面中显示。在你通过上面指令创建组件的时候，会自动更新Doc文档工程的所有依赖组件的部分（不需要任何手工操作）

Example例子工程

Example例子工程跟Doc文档工程类似，用来展示你组件的例子的小型单页面系统，组件的例子就是存放在每个组件文件夹下面的example.vue文件。在通过指令创建组件的完毕，就可以在该文件里测试你写的组件了。

上面的文档工程和例子工程分别通过webpack-dev-sever起了一个对应的服务，添加组件和修改组件文件下的文件信息都会自动刷新这两个应用。

用一张图来表示整个大工程的流程图如下：

主要实现方式

上面已经介绍了整个大工程其实是由组件库、文档工程和例子工程组成的，当然最核心的东西还是组件了，所以一切还需要从创建组件开始说起：

所有的组件都存放在大工程的packages里面，也就是说packages是所有组件存放的根目录（跟组件配置信息相关）。 首先需要说明的是，每个组件文件夹都至少包含组件主文件（index.vue）、组件例子文件（example.vue）、组件文档文件（readme.md)这三个文件。每个组件所包含的这三个文件又是分别通过一个对应的模板文件生成，这三个模板格式可以根据自己的需求自定义，大致类似于：

通过创建组件的命令传递两个参数，一个代表组件的名称（创建组件的文件夹名称），另外一个是组件的标题（用于文档工程和例子工程的导航名称显示）。有了这两个参数，我们就可以结合组件的模板文件生成对应的组件，然后将这些组件信息写入gen/route.json里面，因为文档工程和例子工程都非常依赖这些信息。 组件创建完毕有一个很重要的工作就是自动往文档工程里面注册新的组件信息（docs/main.js）和更新组件库的对外主文件(src/index.js)，这两个文件也分别是通过模板生成的，模板格式分别如下：

使用

只需要四条命令就能开启一个自动化组件工程了：

1、全局安装vde-cli模块

npm install -g vde-cli

2、初始化工程

$ vde init <project-name>

3、安装所需要模块

$ npm install

4、启动项目

$ npm run start

然后整个工程就能运行起来了，应用的时候可以根据实际需求修改组件相关的模板和加入自己的组件库的其它配置信息就可以了。文档工程和例子工程的路由等信息都会在通过创建组件命令的时候自动更新，你在更改组件的文档和组件功能的时候，文档工程和例子工程都会实时更新。

实际项目接入

这里推荐使用npm link的方式，在项目里npm link本地用vde init的那个工程即可。

总结

以上所述是小编给大家介绍的Vue项目组件化工程开发实践方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue+swiper实现组件化开发的实例代码
  • Vue-router 类似Vuex实现组件化开发的示例
  • 在Vue组件化中利用axios处理ajax请求的使用方法
  • 详解vue组件化开发-vuex状态管理库
  • 详解vue.js组件化开发实践
  • webpack+vue.js实现组件化详解
赞 (0)

相关推荐

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • vue+swiper实现组件化开发的实例代码

    swiper的组件 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt="">&l

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • Vue-router 类似Vuex实现组件化开发的示例

    本文介绍了Vue-router 类似Vuex实现组件化开发的示例,分享给大家,具体如下: 随着项目越来越大,把所有route写在一个文件里就显得杂乱. #单个组件路由 import a from '../components/a' export default { path: '/a', name: 'a', component: a } import arouter from 'xxx' export default new Router({ routes: [ arouter ] }) #多

  • 详解vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • Vue项目组件化工程开发实践方案

    Vue项目组件化工程开发实践方案

    我们暂时给提取出来的脚手架取名叫vde-cli,通过vde-cli脚手架生成的组件库工程目录结构如下: 核心功能 组件库 工程的packages文件夹就是用来存放组件库里面的各种组件了,这里不需要通过手动创建文件的方式创建组件,直接通过一条创建组件的命令完成.每个组件都有一个单独的组件文件夹,组件文件夹下都至少包含"index.vue","example.vue","readme.md"这三个文件,这几个文件都是通过创建组件传递的参数加指定的模板

  • 解决ios微信下vue项目组件切换并自动播放音频问题

    解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg

  • vue项目中实现缓存的最佳方案详解

    vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • 浅谈Vue项目骨架屏注入实践

    相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长. 由此引申出一系列的优化方法,骨架屏也因此被提出. 1. FCP优化 在 Google 提出的以用户为中心

  • vue项目常用组件和框架结构介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的"页面",component作为样式或者行为输出,你可以通过这三个东西来实现最基本的静态SPA网站.当然我在这里不谈vue全家桶这样宽泛的概念,我会如数家珍的把主要的技术点一一列举. 1.vue-cli:搭建基本的vue项目骨架,脚手架工具 2.sass-loader&node-sass:我

  • vue项目开发中setTimeout等定时器的管理问题

    一.问题来源. 在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态. 显然,这个可以用setTimeout以及回调中继续setTimeout来实现. 我们假设定时器是在页面#/test/aaa上创建的. 但是,会遇到以下两个问题,我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑. 其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时

  • Vue3结合TypeScript项目开发实践总结

    目录 概述 1.compositon Api 1.ref 和 reactive的区别? 2.周期函数 3.store使用 4.router的使用 2.关注点分离 3.TypeScript支持 概述 Vue3出来已经有一段时间了,在团队中,也进行了大量的业务实践,也有了一些自己的思考. 总的来说,Vue3无论是在底层的原理上,还是在业务的实际开发中,都有了长足的进步. 使用 proxy 代替之前的 Object.defineProperty 的API,性能更加优异,也解决了之前vue在处理对象.数

随机推荐