> 博客详情
一直对vue很感兴趣，最近使用vue2.0开发了高仿饿了么点餐系统来练练手，不得不说vue真是一个很不错的框架，但是也遇到过一些坑，在这里和大家分享一下
饿了么点餐系统
vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll
部分细节还在开发中，感兴趣的可以加入进来，觉得不错的给个star
已经写完，仍有不少地方可以优化，一起来完善吧~
GitHub地址：
扫二维码在手机上查看效果更好
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代码写在一个文件里面，这样既方便编写，也方便管理和修改
在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。
使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：
axios.get(url).then((res)=&{
this.data = res.data
vue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。 比如存储一些公共变量或者是不同组件间的数据处理等。
这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。
const store = new Vuex.Store({
mutations: {
increment(state) {
state.count++
Vue-Router
vue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的， 跳转页面只需要
router.push('test')
获取元素节点
vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如
&div ref="testHook"&test&/div&
...js code
this.$ref.testHook
组件间的通信
一。如果是和子组件通信，则使用ref就可以实现，如：
&test ref="testHook"&&/test&
...js code
this.$ref.testHook.add() //调用test子组件的add方法
二。使用emit来发送广播
vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：
比如想要给test组件发送一个“相加”广播:
export default {
Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象
那么test组件中就需要监听，在created方法里写
export default {
created(){
Vue.$on('add',this.add)
this.count++
除了以上总结的这点小的知识点以外，还有很多vue的知识想要和大家分享，以后会陆续写出来，大家感兴趣的也可以来我的GitHub一起来写这个项目（觉得不错的给个star Hah）
GitHub地址：
我也是前端小白 疯狂学习中:laughing:
诶嘿，还就真巧了这是
谢啦，一起进步~
是的呀，不过视频使用vue1.x写的，我这个使用vue2.0重构的
结合cordova应该可以实现
哈哈哈 这个都被你发现了
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥VUE使用vuex解决模块间传值问题的方法
作者：Fayin
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在看电影、打Dota、撸代码间来回，犹豫不决，终于还是下决心继续学习VUE。
仿照 conde.js 官网写的一个demo，目前已经基本可用，但始终缺少登录页，没有用户权限管理，于是开撸......
&template&
&div id="login"&
&c-header&&/c-header&
&c-form&&/c-form&
&p class="content-block"&&a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success"&登录&/a&&/p&
&/template&
外观大概是这样的：
两个输入项通过 c-form 组件导入
由于没有登录接口调用，初步想法是：点击登录，将c-from组件输入的值（用户名和密码）保存在 sessionStorage 中，通过判断 sessionStorage 是否保存了用户信息，来决定用户的操作权限。
现在问题来了——点击登录，如何取得 c-form 组件中的输入值？
最直接的想法就是通过子组件派生事件，父组件监听触发。转念一想，何不使用vuex来进行管理呢？正好之前从来没有认真对待过它。
坑坑坑，我踩踩踩
终于，总结出使用 vuex 的三大步骤：
步骤1：安装和创建
安装 vuex：npm i vuex --save
创建 store.js，把基本格式写好：
import Vue from 'vue'
import Vuex from 'vuex'
// 首先声明一个状态 state
const state = {
// 然后给 actions 注册一个事件处理函数，当这个函数被触发时，将状态提交到 mutaions中处理
const actions = {
saveName({commit}, msg) {
commit('saveMsg', msg) // 提交到mutations中处理
// 更新状态
const mutations = {
saveMsg(state, msg) {
state.msg =
// 获取状态信息
const getter = {
showState(state) {
console.log(state.msg)
// 下面这个相当关键了，所有模块，记住是所有，注册才能使用
export default new Vuex.Store{
mutations,
步骤2：在子组件中使用（保存输入）
具体到我这里，是在c-form中使用它：
&template&
&input type="text" @blur=saveName(username) v-model="username" placeholder="Your name"&
&/template&
&script type="text/javascript"&
// 引入mapActions，很重要
import { mapActions } from 'vuex'
export default {
username:'',
password: ''
methods: {
...mapActions({
// 在input 的blur 事件中触发回调，并将输入值作为参数返回到store中
saveName: 'saveName'
步骤3：获取在步骤2 中的输入值（获取state）
&template&
&div id="login"&
&c-header&&/c-header&
&c-form&&/c-form&
&p class="content-block"&&a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success"&登录&/a&&/p&
&/template&
// 引入mapGtters，很重要
import { mapGetters } from 'vuex'
export default {
methods: {
...mapGetters([
// 在store.js 中注册的getters
'showState'
components: {
"c-form": require('../components/form.vue'),
"c-header": require('../components/header.vue')
至此，我们就能得到输入值了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我看教程里都是这么写store.js的
import Vue from 'vue'
import Vuex from 'vuex'
我的store是这么写的，下方代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
const mutations = {
export default new Vuex.Store({
我在然后就报错了，说没有找到vuex文件，下图这是我的目录，下图
所以vuex到底是个什么东西，vuex.js？还是什么其它东西，应该怎么导入
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
npm install vuex --save
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用vue-cli写的话就参考下面这段吧
道理是这样的：用es6的import方式引入的是node_modules里面已经配置好的组件；一般我们直接npm install的工程里面的node_modules里面是没有vue-routervuex的，所以就需要另外通过npm install vuex vue-router下载，--save可以帮我们更新package.json文件。
所以到项目目录里看看node_modules下有没有vuex，没有的话就npm install吧
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：