vue 的安装
一般都会推荐使用 NPM 进行 Vue 的安装
vue 的安装依赖于 node.js, 要确保你的计算机上已安装过 node.js 可进入 cmd 编辑器, 输入命令 node -v 进行查看 node 尽量要用新一些的版本, 否则后续安装会提示 node 版本过低去 node 官网下个新版的 node 重新安装就可以如已成功安装 node 会出现如下:
node 的版本
确定 node 安装后, 就可以开始 vue 的安装了这里提一下淘宝镜像, 用淘宝镜像的 cnpm 来代替 npm 的安装, 速度会快很多淘宝镜像推荐网址: https://npm.taobao.org / 同样可进入 cmd 编辑器, 输入命令 vue -v 进行查看
# 最新稳定版
$ npm install vue
vue 的版本
创建一个 Vue 项目
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖, 走你
$ cd my-project
$ npm install
$ npm run dev
Vue 项目创建成功之后, 我们通过 npm run dev 运行, 便进入 Vue 的欢迎页面, 此时你就可以用 Vue 的语法, 编写自己的 Vue 项目了这时我们可以设置一下, 运行时自动打开浏览器找到 config 文件夹下的 index.js 文件, 将 autoOpenBrowser 设置为 true, 运行时可能报错, 需要去配置一下 build 文件下的文件
这里写图片描述
web-app 实践项目开发
介绍
基于 vue2.0+localStorage 开发的本地记事本, 并打包成类似 Android 的 webApp
功能
支持回车添加事件
支持事件状态切换
添加事件 -> 进入未完成列表
未完成 -> 已完成 (勾选 checkbox)
未完成 -> 已取消 (点击取消按钮)
已完成 -> 未完成 (取消勾选 checkbox)
已取消 -> 未完成 (点击恢复按钮)
支持筛选事件
支持编辑事件
支持删除事件
支持清空所有事件
支持本地化存储
支持导出. xlsx 格式的数据
功能实现
1. 该项目是个单页面的应用, 各组件拼接而成, 由于功能简单, 没有使用 Vue 的路由
2. 数据的保存是本地保存, localStorage 是 html5 提供的一种在客户端存储数据的新方法, 没有时间限制, 第二天第二周或下一年之后, 数据依然可用
存储数据: localStorage.setItem(item, value)
获取数据: localStorage.getItem(item)
移除数据: localStorage.removeItem(item)
3. 父子组件间的通讯, 组件实例的作用域是孤立的这意味着不能并且不应该在子组件的模板内直接引用父组件的数据
父组件可以使用 props 把数据传给子组件
子组件可以使用 $emit 触发父组件的自定义事件
4. 可以通过通过类型和关键词来进行筛选, 用户选择类型, 或监听所输入的搜索关键词通过使用过滤器 ( filter ), 精确查寻或模糊查询返回符合条件的事情
// 项目部分代码
query() {
if (this.selectIndex || this.selectIndex === 0) {
this.arr = this.$root.todoItem.filter((item) = >item.num === this.selectIndex) // 精确查询
} else {
this.arr = this.$root.todoItem
}
if (this.screen_title) this.arr = this.$root.todoItem.filter((item) = >item.value.indexOf(this.screen_title) > -1) // 模糊查询
}
5. 将数据以. xlsx 格式导出, 此功能需要安装三个依赖, 项目中新建一个文件夹:(vendor--- 名字任取) 里面放置两个文件 Blob.js 和 Export2Excel.jsBlob.js 将我们要导出的数据变成二进制, 而 export2Excel 就是可以设置导出样式以及提供导出的方法
npm install file-saver
npm install xlsx
npm install script-loader
各组件详解
{eventAdd.vue} 这是一个添加事件的组件, 将事件对象 obj 保存到 Vue 全局变量 todoItem 中, 首先我们需要定义一个 Vue 全局的对象存放所添加的事件的数据, 在 main.js 创造 Vue 实例时, 定义一个 todoItem 变量然后在 eventAdd 组件中定义一个对象, 并设置其对象的属性, 属性值, 代码后面已做了注释
Vue 全局变量 todoItem
.png
{eventsList.vue} 对事件进行处理的组件, 首先通过 this.$root.todoItem 获取 Vue 全局变量里所存放的事件, 让后通过 v-for 对数据进行处理渲染到页面上, 点击不同的事件时, 改变事件对象 num 属性的属性值, 改变 num 属性值以后, 一定要再一次把 todoItem 变量保存到本地 (不同属性的属性值代码上已经做了注释), 通过 v-if 判断 num 的属性值将事件渲染到不同的位置例如点击取消事件, 将事件的 num 属性值变为 2.
7.png
这里写图片描述
3.{sidebar.vue} 是测边栏, 提供切换主题, 下载数据, 编辑数据, 清空数据点击下载数据, 浏览器将自动把存放在 todoItem 变量里的事件对象通自己设置的样式已. xlsx 格式导出, 其具体实现看代码点击编辑数据, 清空数据时, 通过 this.$emit() 将信息传给父组件, 而组件再通过 prop 调用其它的组件
这里写图片描述
父组件 (app.vue) 其结构
这里写图片描述
{eventsTable.vue} 该组件是对事情事件进行编辑, 提供搜索, 编辑, 删除事件功能, 注意: 需定义一个中间变量, 不能直接去使用 this.$root.todoItem 进行列表渲染, 否则查询的时候会将原有的事件数据进行改动查询有着几种方式, 如下:
这里写图片描述
5. 还有其它弹框, 头部, 尾部组件, 都是通过父子组件间的通讯, 而且可以重复利用, 大概也算组件化开发一种优势, 可以少写很多重复的代码, 代码有着详细的注释
打包
项目开发完成后, 需要进行打包才能部署到服务器上的, 打包之前我们需要改一下 config 文件夹 index.js 文件的配置, 需多加一个点打包完成后可以在 dist 文件夹下找到打包后的文件
// 执行命定
npm run build
这里写图片描述
打包成安卓 webApp
当打包完成后, 是通过 cordova,android studio 来进行打包成安卓 webApp, 其实打包流程不难, 就几步, 只是配置安卓坏境有点麻烦, 可以试着了解一下, 将自己的项目打包成安卓 webApp
总结
本人小白一枚, 一直踩坑中, 多多指导, 相互交流学习这个案列适合新手去了解 vue 的几个重要的特性, 感觉用不到路由, 其实 Vue 路由的功能还是非常的强大的
安卓 webApp 下载 https://pan.baidu.com/s/1i7clnvv
github 地址 https://github.com/flym1013/notes-
note-app
来源: http://www.jianshu.com/p/50705e49848e