17

说明

1.项目准备用苍渡大神的elm项目,Github地址
2.node版本 6.10.3,用的windows,工具用的sublime
3.下一章--vue从创建到完整的饿了么(2)路由


开始

  1. cmd 进入想要创建的目录。
  2. vue init webpack elm elm是项目名称(确保安装了node,vue-cli)。
  3. cmd 输入cd elm 进入vue文件。
  4. npm install(下载配置文件)。
  5. npm install vue-router vue-resource --save(安装 vue 路由模块 vue-router 和网络请求模块 vue-resource)。
  6. 项目目录如图

图片描述

  1. 打开config目录中的index文件,将port:3000改为port:1999(修改项目端口,以免与其它文件冲突)。
  2. cmd输入npm run dev 浏览器弹出新页面显示一个VUE的大logo表示创建成功,不弹出页面输入localhost:1999也可以访问。
  3. 发现这个项目还用了一个vuex,没用过,先安上再说cmd输入npm install --save vuex(cmd先把vue服务关掉ctrl+c)。
  4. 看了看vuex文档,觉得如果把一个个vue组件当成一个个独立闭包函数,那vuex就相当于一个全局的json,里面有几个key:

       State:用来存放变量,
       Mutations:用来存放函数(同步),
       Getters:State的计算属性,也是存放函数,但是当state属性改变时,Getters的返回值也会随之改变,
       Action:函数(异步)

在任意一个组件中都可以调用vuex(这是我目前对vuex的认识)。

  1. 发现项目是把vuex放到src文件夹的store文件夹里,咱们也来。在src中新建文件夹store,在store文件夹中新建文件index.js并输入几行代码,结果如图。

图片描述

  1. vuex一个属性一个文件,再把所有属性汇聚的index里,挂到Store下输出
  2. 新建getters.js,actions.js,mutations.js文件,代码全都一样如图
  3. 现在vuex可以输出了,但是在哪里引用呢?打开main.js,修改后如图图片描述
  4. cmd输入npm run dev后显示下图则表示正常图片描述
  5. 准备工作先做这么多,下面准备写页面

你的前端
132 声望93 粉丝

你的前端