技术栈:

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. Office 2016系列下载地址

    版本:Office 2016 Pro Plus 64位文件名:SW_DVD5_Office_Professional_Plus_2016_64Bit_ChnSimp_MLF_X20-42426.ISO ...

  2. WeGame导致WSL无法监听端口问题

    Windows 10 系统自带Linux子系统(WSL),可以方便的使用WSL运行Linux程序和脚本.笔者在WSL上运行Redis时突然发现无法监听6379端口,尝试重新安装WSL无果. 后来重新安 ...

  3. python中join函数的用法

    这个函数可以对字符串按照某种方式进行拼接,比如你要在三个字母中间都添加一个特定字符,就可以用这个函数实现 result = '*'.join(['A','B','C']) print(result) ...

  4. 基于wsimport生成代码的客户端

    概述 wsimport是jdk自带的命令,可以根据wsdl文档生成客户端中间代码,基于生成的代码编写客户端,可以省很多麻烦. wsimport命令 wsimport的用法 wsimport [opti ...

  5. NGUI EventDelagate事件委托

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class BUttonCl ...

  6. centos 7 的安全检查和ip封锁设置

    查看最近登录失败的验证记录 tail -f grep "authentication failure;" /var/log/secure 发现有个ip频繁尝试登录, /sbin/i ...

  7. WSDL格式浅析

    其中,WSDL是一种 XML 格式,用于将网络服务描述为一组端点,这些端点对包含面向文档信息或面向过程信息的消息进行操作.这种格式首先对操作和消息进行抽象描述,然后将其绑定到具体的网络协议和消息格式上 ...

  8. [转]spring4.x注解概述

    1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能,因项目中用到不少注解,因此下定决心,经spring4.x中涉及到的注解罗列出来,供查询使用. 2. spring注解图     ...

  9. [转]No configuration found for the specified action解决办法

    使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s:form>标记时,发现控制台总是输出警告信息, 警告信息内容如下: 警告: ...... <div> h ...

  10. mysql语句总结

    mysql语句总结 -- 1,通过windows提供的服务管理来完成 -- services.msc -- 2,dos下的命令来完成 -- 停止 -- net stop mysql -- 启动 -- ...