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笔记
http://www.cnblogs.com/thyong/p/5274748.html

---