技术栈:

vue2 vuex vue-router axios webpack eslint better-scroll

1.安装插件

npm install vue-resource babel-runtime --save
npm install babel-preset-es2015 stylus-loader function-bind json-loader --save-dev

2.增加 better-scroll

.eslintrc.js

'space-before-function-paren': 0,
'semi': 0,
'no-new': 0,
'no-unused-vars': 0,
'no-undef': 0

安装插件:

npm install better-scroll fastclick iscroll v-tap vue-scroll --save

3.添加 axios

4.添加 vuex

5.打包

npm run build

.gitignore

.DS_Store
node_modules/
resource/
dist/
npm-debug.log

6.

npm install moment --save

制作时间过滤器,将 时间戳 变为 日期格式

7.设置mock 数据

build/dev-server.js

var appData = require('../static/data.json')

8.

npm install eslint-config-standard --save

9.

npm install watchpack --save

注:下面是关于这些钩子函数的解释:

hook 描述
beforeCreate 组件实例刚被创建,组件属性计算之前
created 组件实例创建完成,属性已绑定,但是 DOM 还未生成, $el 属性还不存在
beforeMount 模板编译/挂载之前
mounted 模板编译/挂载之后
mounted 模板编译/挂载之后(不保证组件已在 document 中)
beforeUpdate 组件更新之前
updated 组件更新之后
activated for keep-alive,组件被激活时调用
deactivated for keep-alive,组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

vue 仿ele 开发流程的更多相关文章

  1. vue 仿QQ 开发流程

    技术客栈: vue-cli vue2 vue-router vuex axios stylus webpack2 muse-ui 1.安装脚手架 npm install -g vue-cli 2.开始 ...

  2. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

  3. Vue项目的开发流程

    我先安装的node.js 1.确认已安装了node.js,可在cmd中输入( node -v和npm -v),如显示出版号,说明安装成功 2.安装webpack 和webpack-cli 在全局下安装 ...

  4. vue 项目的开发流程

    1.$ node -v (检测node版本,node版本需要在 V4 以上) 2.全局安装vue $ npm install -g vue 3.安装脚手架 $ npm install -g vue-c ...

  5. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  6. Vue 框架-12-Vue 项目的详细开发流程

    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...

  7. vue2.0 仿手机新闻站(一)项目开发流程

    vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据 没有用任何UI组件,切图完成 做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ...

  8. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  9. Android之仿ele地图定位效果

    PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...

随机推荐

  1. shell 文本加密

    第一种:[ Python 与 Bash Shell 的结合 ]这个命令会让你输入一个字符串,然后会再输出一串加密了的数字. 加密代码[照直输入]:python -c 'print reduce(lam ...

  2. BZOJ 3022 [Balkan2012]The Best Teams(扫描线+线段树)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3022 [题目大意] 给定n个球员,第i个球员年龄为AGEi,水平为SKILLi. 没有 ...

  3. linux中django部署

    下载nginx yum install nginx rpm -ql nginx systemctl start nginx /usr/share/nginx/html # html页面 /etc/ng ...

  4. Java学习笔记(9)

    final关键字;  (修饰符) final关键字的用法: final关键字修饰一个基本类型的变量时,该变量不能重新赋值,第一次的值为最终的. final关键字修饰一个引用类型变量时,该变量不能重新指 ...

  5. redis源码解析之内存管理

    zmalloc.h的内容如下: void *zmalloc(size_t size); void *zcalloc(size_t size); void *zrealloc(void *ptr, si ...

  6. 《深入理解Spark-核心思想与源码分析》(四)第四章存储体系

    天行健,君子以自强不息:地势坤,君子以厚德载物.——<易经> 本章导读 Spark的初始化阶段.任务提交阶段.执行阶段,始终离不开存储体系. Spark为了避免Hadoop读写磁盘的I/O ...

  7. Android:布局实例之模仿QQ登录界面

    预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...

  8. Codeforces Round #114 (Div. 1) C. Wizards and Numbers 博弈论

    C. Wizards and Numbers 题目连接: http://codeforces.com/problemset/problem/167/C Description In some coun ...

  9. web安全开发指南--权限管理

    2.1               访问控制安全规则 1 访问控制必须只能在服务器端执行. 2 只通过session来判定用户的真实身份,避免使用其它数据域的参数(比如来自cookie.hidden域 ...

  10. gridview展开嵌套显示

    最近实在是太忙了,好几个月没有更新博客了,近来项目需要用到GRIDVIEW嵌套的,在这里跟大家分享一下,大家如有更好的解决方案,请不吝贴出.在ASP.NET中,GridView嵌套可以显示当前选定的父 ...