深入浅析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+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
js中url对象化管理分析
Dec 29 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
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和ACCESS写聊天室(八)
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
js闭包用法实例详解
2016/12/13 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python 判断一个进程是否存在
2009/04/09 Python
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python进行文件对比的方法
2018/12/24 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
mysql sock 文件解析及作用讲解
2022/07/15 MySQL