您的当前位置:首页正文

在Vue中项目组件化开发(详细教程)

2023-11-29 来源:博科教育
这篇文章主要介绍了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中使用eventBus如何实现同级组件的通讯

在node.js中如何实现下载图片

使用vue2.0+vue-dplayer这些技术如何实现hls播放的示例

小编还为您整理了以下内容,可能对您也有帮助:

Vue 的组件化开发是如何实现的?

Vue 的组件化开发是通过将页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。Vue 中规定:组件的后缀名是 .vue。在 Vue 中,可以使用 Vue 的内置组件,如 div、span、p、img、ul、li 等,也可以使用第三方库提供的组件,如 Bootstrap、ElementUI 等。在 Vue 中,可以使用 Vue 的内置指令 v-bind、v-on、v-model 等来实现数据的绑定和事件的监听。

Vue组件化开发

✍ 目录总览: (组件化概念、组件注册、数据存放、组件数据共享、组件插槽、使用步骤)

1. 组件化开发思想

组件化思想的特点 :标准、分治、复用、组合

2. 组件定义

3. Vue中的组件化开发

4. Vue组件的三个组成部分

每个 .vue 组件都由 3 部分构成,分别是:

其中, 每个组件中必须包含 template 模板结构 ,而 script 行为 和 style 样式 是 可选 的组成部分。

实例:

1. data必须是一个函数

2. 组件模板内容必须是单个跟元素

3. 组件模板内容可以是模板字符串 (需要浏览器提供ES6语法支持)

4. 组件命名方式

1. 组件内部通过props接收传递过来的值

2. 父组件通过属性将值传递给子组件

3. props属性名规则

4. props属性值类型

1. 子组件通过自定义事件向父组件传递信息

2. 父组件监听子组件的事件

3. 子组件通过自定义事件向父组件传递信息

4. 父组件监听子组件的事件

1. 单独的事件中心管理组件间的通信

2. 监听事件与销毁事件

3. 触发事件

vue 引进组件的步骤有哪些?

在Vue中引入组件的步骤如下:

1. 首先,你需要在你的Vue项目中创建一个组件。你可以在.vue文件中定义组件,也可以在其他文件中定义组件。如果你在其他文件中定义组件,你需要将它们导出为JavaScript模块。

2. 然后,你需要在你的Vue应用程序中注册这个组件。你可以使用Vue.component()方法来注册组件。例如,如果你想注册一个名为“my-component”的组件,你可以这样做:Vue.component('my-component', { /* 组件选项 */ });

3. 最后,你可以在你的Vue模板中使用这个组件。例如,如果你想在一个div元素中使用“my-component”组件,你可以这样做:

怎样进行Vue拖拽组件开发

这次给大家带来怎样进行Vue拖拽组件开发,进行Vue拖拽组件开发的注意事项有哪些,下面就是实战案例,一起来看一下。

为什么选择Vue?

主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之,Vue本身具有以下主要特性:

?使用虚拟DOM;

?轻量级框架;

?高效的数据绑定;

?灵活的组件系统;

?完整的开发生态链。

这就是我们为什么选择Vue框架的一些原因。

为什么要封装成一个Vue组件?

主要目的是可提高代码的复用性和可维护性。

?复用性:组件化后,一些样式和逻辑均通过配置参数的方式去差异化体现,所以参数的可配置性提高了组件的复用率和灵活性。

?可维护性:组件化后,组件内部的逻辑只对组件负责,外部的逻辑只通过配置参数适配,所以提高了代码的逻辑清晰度,可以快速定位代码出现问题的地方。

组件化搭建页面图示:

上图可看出,在Vue中,所谓组件化搭建页面,简单来说,页面实际上是由一个个功能的组件搭建而成。这些组件之间可以组合、嵌套,最终形成了我们的页面。

组件构成

下面是一个完成的组件构成:

// 组件内模板

// 组件内逻辑代码

<script type="text/javascript"></script>

// 组件内封装的样式

<style lang="scss" scoped></style>开发Vue移动拖拽组件为例

拖拽原理

手指在移动的过程中,实时改变元素的位置即top和left值,使元素随着手指的移动而移动。

拖拽实现

?开始拖动时:获取到接触点相对于整个视图区的坐标clientX,clientY;获取元素距离视图上侧和左侧的距离 initTop,initLeft;计算接触点距离元素上侧和左侧的距离 elTop = clientY - initTop, elLeft = clientX - initLeft;

?拖动过程中:通过 currTop = clientY - elTop, currLeft = clientX - elLeft实时获取元素距离视图上侧和左侧的距离值,并赋值给元素,使元素跟着手指的移动而动起来;

?拖动结束,定位元素。

Vue中的实现

使用Vue,最大的不同之处是我们几乎不去操作DOM,要充分利用Vue的数据驱动来实现拖拽功能。本例中,我们只需在垂直方向上拖动元素,所以只需考虑垂直方向的移动即可。

上图中,通过data中的dragList渲染拖拽区域列表,代码如下:

template:

<p class="drag-title">拖拽可调整顺序</p>

<ul class="drag-list">

<li class="drag-item">{{item.txt}}</li>

</ul>

script:

export default {

data() {

return {

dragList:null

}

},

created() {

this.dragList = [

{

isDrag: false,

txt: '列表1',

isShow: false

}

...

]

},

}假设我们将元素从位置1拖至位置3,本质上是数组的顺序发生了改变。这就有必要提一下Vue的最大特性:数据驱动。

所谓的数据驱动就是当数据发生变化时,通过修改数据状态,使用户界面发生相应的改变,开发者不需要手动的去修改DOM。

Vue的数据驱动是通过MVVM这种框架来实现的,MVVM框架主要包含3个部分:Model、View、Viewmodel。

_ Model:数据部分;

_ View:视图部分;

_ Viewmodel:连接视图与数据的中间件。

顺着这个思路走下去,我们知道:

_ oldIndex:元素在数组中的初始索引index;

_ elHeight:单个元素块的高;

_ currTop = clientY - elTop:元素在拖动过程中距离可视区上侧距离;

_ currTop - initTop > 0:得知元素是向上拖拽;

_ currTop - initTop < 0:得知元素是向下拖拽。

我们以向下拖拽来说:

_ 首先,我们要在拖拽结束事件touchend中判断元素从拖动开始到拖动结束时拖动的距离。若小于某个设定的值,则什么也不做;

_ 然后,在touchmove事件中判断,若(currTop - initTop) % elHeight>= elHeight/2成立,即当元素拖至另一个元素块等于或超过1/2的位置时,即可将元素插入到最新的位置为newIndex = (currTop - initTop) / elHeight + oldIndex。

_ 最后,若手指离开元素,那么我们在touchend事件中,通过this.dragList.splice(oldIndex, 1),this.dragList.splice(newIndex, 0, item)重新调整数组顺序。页面会根据最新的dragList渲染列表。

写到这里,我们俨然已经用Vue实现了移动端的拖拽功能。但是拖拽体验并不好,接下来,我们对它进行优化。

优化点:我们希望,在元素即将可能落到的位置,提前留出一个可以放得下元素的区域,让用户更好的感知拖拽的灵活性。

方案:(方案已被验证是可行的)将li的结构做一下修改,代码如下:

<ul>

<li class="drag-item">

<p class="leave-block"></p>

// 向上拖拽时留空

<p class="">{{item.txt}}</p>

<p class="leave-block"></p>

// 向下拖拽时留空</li>

</ul>?拖拽开始:将元素的定位方式由static设置为absolute,z-index设置为一个较大的值,防止元素二次拖拽无效;

?拖拽过程中:将元素即将落入新位置的那个li下p的item.isShow设置为true,其他li下p的item.isShow均设置为false;

?拖拽结束:将所有li下p的item.isShow 均设置为false,将元素定位方式由absolute设置为static。

贴一段伪代码:

touchStart(e){

// 获取元素距离视口顶部的初始距离

initTop = e.currentTarget.offsetTop;

// 开始拖动时,获取鼠标距离视口顶部的距离

initClientY = e.touches[0].clientY;

// 计算出接触点距离元素顶部的距离

elTop = e.touches[0].clientY - initTop;

},

touchMove(index, item, e){

// 将拖拽结束时,给元素设置的static定位方式移除,防止元素二次拖拽无效

e.target.classList.remove('static');

// 给拖拽的元素设置绝对定位方式

e.target.classList.add('ab');

// 获取元素在拖拽过程中距离视口顶部距离

currTop = e.touches[0].clientY - elTop;

// 元素在拖拽过程中距离视口顶部距离赋给元素

e.target.style.top = currTop ;

// 获取元素初始位置

oldIndex = index;

// 获取拖拽元素

currItem = item;

// 若元素已经拖至区域外

if(e.touches[0].clientY > (this.dragList.length) * elHeight){

// 将元素距离上侧的距离设置为拖动区视图的高

currTop = (this.dragList.length) * elHeight;

return;

}

// 向下拖拽

if(currTop > initTop ){

// 若拖拽到大于等于元素的一半时,即可将元素插入到最新的位置

if((currTop - initTop) % elHeight>= elHeight / 2){

// 计算出元素拖到的最新位置

newIndex = Math.round((currTop - initTop) / elHeight) + index;

// 确保新元素的索引不能大于等于列表的长度

if(newIndex < this.dragList.length){

// 将所有列表留空处隐藏

for(var i = 0;i< this.dragList.length;i++){

this.dragList[i].isShow = false;

}

// 将元素即将拖到的新位置的留空展示

this.dragList[newIndex].isShow = true;

}

else {

return;

}

}

}

// 向上拖拽,原理同上

if(currTop < initTop){ ... } }, touchEnd(e){ // 若拖动距离大于某个设定的值,则按照上述,执行相关代码 if(Math.abs(e.changedTouches[0].clientY - initClientY ) > customVal){

this.dragList.splice(oldIndex, 1);

this.dragList.splice(newIndex, 0, currItem);

for(var i = 0;i< this.dragList.length;i++){

this.dragList[i].isShow = false;

this.dragList[i].isShowUp = false;

}

}

e.target.classList.remove('ab');

e.target.classList.add('static');

}优化后,如下图所示:

以上便是用Vue实现移动端拖拽组件的过程。我们知道,有些项目是需要在PC端用Vue实现此功能。这里简单提一下PC与移动端的区别如下:

?PC端可以使用的事件组有两种:第一种:H5新特性draggable,dragstart,drag,dragend;第二种:mousedown,mousemove,mouseup;

?PC端获取鼠标坐标是通过e.clientX,clientY,区别于移动端的e.touches[0].clientX,e.touches[0].clientY。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

怎样操作vue中$emit 与$on父子与兄弟组件通信

如何使用node命令方式启动修改端口

博科教育还为您提供以下相关内容希望对您有帮助:

怎样进行Vue拖拽组件开发

开发Vue移动拖拽组件为例拖拽原理手指在移动的过程中,实时改变元素的位置即top和left值,使元素随着手指的移动而移动。拖拽实现?开始拖动时:获取到接触点相对于整个视图区的坐标clientX,clientY;获取元素距离视图上侧和左侧的距离 initTop,ini...

Vue组件化开发

1. 组件化开发思想 组件化思想的特点 :标准、分治、复用、组合 2. 组件定义 3. Vue中的组件化开发 4. Vue组件的三个组成部分 每个 .vue 组件都由 3 部分构成,分别是:其中, 每个组件中必须包含 template 模板结构...

Vue 的组件化开发是如何实现的?

Vue 的组件化开发是通过将页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。Vue 中规定:组件的后缀名是 .vue。在 Vue 中,可以使用 Vue 的内置组件,如 div、span、p、img、ul、li 等,也可以使用第三...

Vue组件化开发(三)——slot插槽的使用

我们可以看一下下面这个案例: 我们一共在Vue实例中使用了2次子组件,第一次父组件没有往子组件中传递元素,第二次父组件有往子组件传递元素。从结果上看,当父组件没有往子组件插槽中添加元素时,则会展示插槽中默认...

你体会到Vue 组件化思想了吗?

子组件是不能引用父组件或者 Vue 实例的数据的,但是在开发中,一些数据确实需要从上层传递到下层,比如在一个页面中从服务器中请求到很多数据,其中一部分数据并非由整个页面的大组件展示的,而是需要下面的小组件进行展示,...

vue项目完整搭建步骤

在终端输入以下命令:检测cnpm是否安装成功 vue-cli是vue脚手架工具,方便打包,部署,测试等。进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名 进入项目 安装依赖 此时项目中会多了一个...

用vue2 进行项目开发要注意什么?

如果您使用 Vue.js 2 进行项目开发,以下是一些需要注意的事项:1. 了解 Vue.js 的基本概念和语法,例如组件、指令、过滤器和计算属性等。这将有助于您更好地理解 Vue.js 的工作原理。2. 熟悉 Vue.js 的生命周期钩子...

Vue实战(六)通用Table组件

本文是 Vue实战 系列的第六篇文章,主要介绍Falcon项目中通用 Table 组件的开发和使用 。Falcon项目地址: https://github.com/thierryxing/Falcon 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个...

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

我的前端组件化架构设计,目录如下:项目架构用到的知识点,还是挺多的,知识清单如下:[1]: gulp + webpack 构建打包工具, 使用了一系列的loader,比如:vue-loader, sass-loader, babel-loader , 以及 postcss,...

ssm框架vue前端项目怎么跑

学习前端框架Vue的步骤如下:了解Vue框架的基本概念和特点。了解Vue框架的基本架构和工作原理,包括Vue的视图层渲染、数据绑定、组件化和路由等功能。学习Vue框架的基本语法和使用方法。前端开发不需要配编译环境了,只需要把需要...

Top