vue +vue-router + es6 +webpack 高仿饿了么app

vue +vue-router + es6 +webpack 高仿饿了么app

刚通过某课网的教程学习了vue高仿饿了么app,由于教程是用Vue1.0编写的，现在Vue已经更新到了2.0，所以项目遇到挺多坑的，跟大家分享一下。

项目运用技术

vue-cli

vue

vue-resource

vue-router

better-scroll

stylus

webpack

sticky footer布局

flex弹性布局

响应式布局

项目最终效果

-加入购物车动画



-商品详情页面



-商家页面

项目地址

**https://github.com/Barrycca/project_vue

素材地址：https://github.com/Barrycca/project

代码运行:

通过npm安装本地服务第三方依赖模块(需要已安装Node.js)

cd 到文件目录

npm install

npm run dev

启动服务(http://localhost:8080)

npm run build 发布

创建项目

事前准备

1.cmd 安装cnpm 百度cnpm

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

2.安装vue

npm install vue   /    cnpm install vue

Vue-cli　脚手架安装：

首先 node -v确认自己电脑是否安装了node并保证版本在4.0以上；

安装Vue-cli

npm install –global vue-cli / cnpm install –global vue-cli

创建项目：

下面就是我遇到的第一个坑

注意：创建项目的时候首先进入你的一个项目文件夹

vue init webpack （项目名称）  官方提供的

vue init webpack-simple vuedemo01  推荐

vue init webpack-simple 项目名称   （默认安装的2.0）

vue init webpack-simple#1.0  项目名称（vue1.0项目创建）

由于我是直接 “vue init webpack sell”创建项目的，忘了是默认安装Vue2.0的组件，而教程的指令都是Vue1.0的，有些指令在2.0已经废弃或替换，所以导致我一开始就卡了一下。

例如：创建路由器

router.map({
'/goods': {
component: goods
},
'/ratings': {
component: ratings
},
'/seller': {
component: seller
}
});

如果是创建2.0版本的话就会报错router.map is not a function

详情看：http://cn.vuejs.org/v2/guide/routing.html

安装依赖

cd 到你的项目目录

npm install / cnpm install 安装依赖

运行项目

运行项目npm run dev 调试运行

小结

项目又运用到eslint来对代码进行规范，就是你打错一个字或者多一个空格少个逗号都会报错，一开始用起来会很难受，但是对你的代码规范非常有好处。

安装 vue-cli eslint

npm install -g eslint

我总结了eslint常见的错误：

1.semi Missing semcolon

缺少分号

2.space-before-blocks Missing space before opening brace

缺少空格

3.no-unused-vars ‘XXX’ is defined but never used

定义的变量未使用

其他错误的话都会明确的指出来的，我的小技巧就是打完一串代码就格式化一次，我用的是WEBSTORM，格式化的快捷键是ctrl+alt+l；也可以自定义。

另外项目全都是用ES6新语法写的，像箭头函数，const，let····

想了解ES6的新特性可以去阮一峰老师的日志看看：http://es6.ruanyifeng.com/#docs/intro

项目的样式部分是用stylus编写的，stylus跟sass，less一样是预处理期；但是stylus比其他的跟新，用起来也是比较方便，使用前要声明一下是stylus

<style lang="stylus" rel="stylesheet/stylus">

.tab
display: flex
width: 100%
height: 40px
line-height: 40px
.tab-item
flex: 1
text-align: center
& > a
display: block
font-size: 14px
color: rgb(77, 85, 93)
&.active
color: rgb(240, 20, 20)
</style>

说到样式给大家普及一下CSS样式的书写规范和顺序

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

还有其他css规范见： http://sc.chinaz.com/info/130904535431.htm

vue vue-router es6 webpack 高仿饿了么app
项目运用技术

项目最终效果
项目地址

创建项目

安装依赖

运行项目

小结

经过这次的项目实战，我对vue模块化和组件化有了更深的了解，先写到这里，以后再来补充，如果大家想要视频教程可以私聊我~

更多Vue笔记

http://www.cnblogs.com/thyong/p/5274748.html