使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析



vue2重写饿了么

构建

vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如:

  • 代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便
  • PostCss,再也不用去管兼容性的问题了,只针对chrome写css代码,会自动编译生成支持多款浏览器的css代码
  • Eslint,统一代码风格,规避低级错误,对于有代码洁癖的人来说是绝对的好东西,不过有些地方的代码校验有时候也挺麻烦的-.-
  • bable,ES2015出来已经有一段时间了,但是不少浏览器还没有兼容ES6.有了bable,放心使用ES6语法,它会自动转义成ES5语法。
  • Stylus,类似于SASS/SCSS,但是可以不写{}和“:”,使用起来还是很方便的

除此之外,vue-cli已经使用node配置了一套本地服务器和安装命令等,本地运行和打包只需要一个命令就可以搞定,非常的方便

开发

vue非常好的融合了React的组件化思想和angular的指令思想。 一个vue的组件将HTML、CSS、JS代码写在一个文件里面,这样既方便编写,也方便管理和修改

Axios

在vue1.x的时候,vue的官方推荐HTTP请求工具是vue-resource,但是在vue2.0的时候将推荐工具改成了axios。

使用方式都差不多,但需要注意的是:接口返回的res并不直接是返回的数据,而是经过axios本身处理过的json对象。真正的数据在res.data里:

 

axios.get(url).then((res)=>{
  this.data = res.data
})

 

Vuex

vue提供了一个数据管理工具vuex,有点类似于angular中factory和service,可以进行数据上的通信。 比如存储一些公共变量或者是不同组件间的数据处理等。

这个有一些高级用法在这里不细说,想要了解的可以去官方文档看,有中文版本。

复制代码
const store = new Vuex.Store({
  state: {
    count: 0 },  mutations: { increment(state) { state.count++ } } })
axios.get(url).then((res)=>{
  this.data = res.data
})
复制代码

Vue-Router

vue-router是vue的路由系统,可以用来创建单页应用。基本思想是在主页面中引入标签,然后定义路由,把router挂在到app上,然后把各个子页面渲染到view里面。使用起来还是很方便的, 跳转页面只需要

router.push('test')

获取元素节点

vue2.0废除了v-el指令,所有的节点指令修改为ref,然后通过ref来获取元素节点,如

<div ref="testHook">testdiv> ...js code this.$ref.testHook

 

组件间的通信

一。如果是和子组件通信,则使用ref就可以实现,如:


...js code
this.$ref.testHook.add() //调用test子组件的add方法

二。使用emit来发送广播

vue2提供了一套广播机制,即一边发送广播,一边接收广播来执行相应操作。使用方法如下:

比如想要给test组件发送一个“相加”广播:

复制代码
export default {
  method:{
    click(){
      Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口,不需要则传空对象
    }
  }
}
复制代码

那么test组件中就需要监听,在created方法里写

复制代码
export default {
  created(){
   Vue.$on('add',this.add)
  },
  method:{
    add(){
      this.count++
    }
  }
}
复制代码

我的GitHub地址:https://github.com/LeaderAndMaster/vue2-element

https://github.com/SimonZhangITer/VueDemo_Sell_Eleme

在我的博客中写了一些关于此项目遇到的一些坑和建议:

https://my.oschina.net/keysITer/blog/834287

演示

在线演示戳我
使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析_第1张图片
扫二维码在手机上查看效果更好

项目截图

安装步骤

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build


你可能感兴趣的:(基于vue开发的项目)