深入浅析Vue组件开发


Posted in Javascript onNovember 25, 2016

前言

这里讲的主要是想谈谈基于Vue的一个组件开发。不得不说的一点就是,在实际的Vue项目中,页面中每一个小块都是由一个个组件(.vue文件)组成,经过抽离后,然后再合并一起组成一个页面。由于上家公司我负责多的是可视化这一块的开发,这边我也将带着大家进行一个Vue项目中的可视化组件的开发,这里用到的框架将是主流的可视化框架highcharts。

一、Vue环境的搭建

1、Mac用户

首先安装包管理homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

再安装node

brew install node

安装vue

npm install vue

2、windows用户

进入nodejs官网,然后下载对应自己电脑系统的版本

深入浅析Vue组件开发

安装成功,安装vue

npm install vue

最后查看一下自己node,npm,vue版本(失败的话自行百度windows系统如何安装node)。下图是我目前node,npm及vue的版本

如果这里出问题了,请全局安装vue-cli

npm install -g vue-cli

二、Vue项目初始化

进入你需要搭建Vue项目的目录下执行

vue init webpack my-vue-component

配置就按下图进行选择

深入浅析Vue组件开发

然后进入到my-vue-component目录执行

# 下载项目的版本依赖
npm install

由于我家里的网络,需要翻墙的npm根本动不了,这里我用的是淘宝镜像进行的依赖安装,没有淘宝镜像的先安装一下吧(实际项目中还是需要用npm,毕竟cnpm会忽略下载一些依赖的)

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成,启动项目

npm run dev

OK,至此,Vue项目便搭建好了。

三、highchars的导入与搭建

首先通过cnpm进行highchars的导入

cnpm install highcharts --save

导入完成后就可以进行highchars的可视化组件开发了

1、首先打开自己初始化好的项目(这里我用的是sublime,实际开发中我用的是atom)

在初始化好了的components目录下新建一个chart.vue文件

接下来搭建chart组件的架子

<template>
<div class="x-bar">
<div :id="id"
:option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 验证类型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id,this.option)
}
}
</script>

chart架子搭好后,开始创建chart-options目录,里面创建一个options.js用来存放模拟的chart数据

这里我模拟写了一个柱状图的数据

module.exports = {
bar: {
chart: {
type: 'bar',
},
series: [{
data: [50, 235, 809, 947]
}]
}
}

四、引用chart组件

这里直接就把引用写到App.vue这么一个接口文件中吧

<template>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</template>
<script>
// 导入chart组件
import XChart from 'components/chart.vue'
// 导入chart组件模拟数据
import options from './chart-options/options'
export default {
name: 'app',
data() {
let option = options.bar
return {
id: 'test',
option: option
}
},
components: {
XChart
}
}
</script>
<style>
#test {
width: 400px;
height: 400px;
margin: 40px auto;
}
</style>

到这里,chart组件也引入成功,我们直接看一下最后页面中显示的效果吧

深入浅析Vue组件开发

这里需要说明一点的就是对于所有highchars组件的适用度。大家通过看我写的模拟数据也可以看出来,这里我是把一些通用的属性给直接忽略了。如果实际项目的开发中需要的话,大家可以把通用的一些属性的数据直接写到chart.vue文件中。通过props验证,写好default默认值作为通用属性。直接给大家看下我实际开发当中对于一些通用属性的处理吧

深入浅析Vue组件开发

这里还是需要看你们项目的需求,然后制定一套属于自己的通用的属性。然后再单独对每个组件进行操作。

以上所述是小编给大家介绍的Vue组件开发,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
javascript中href和replace的比较(详解)
Nov 25 #Javascript
移动适配的几种方案(三种方案)
Nov 25 #Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 #Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 #Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 #Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 #Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 #Javascript
You might like
php 数组二分法查找函数代码
2010/02/16 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
js实现div色块碰撞
2020/01/16 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
学生打架检讨书
2014/10/20 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
python_tkinter弹出对话框创建
2022/03/20 Python