说明
1.项目准备用苍渡大神的elm项目,Github地址
2.node版本 6.10.3,用的windows,工具用的sublime
3.下一章--vue从创建到完整的饿了么(2)路由
开始
- cmd 进入想要创建的目录。
-
vue init webpack elm
elm是项目名称(确保安装了node,vue-cli)。 - cmd 输入
cd elm
进入vue文件。 -
npm install
(下载配置文件)。 -
npm install vue-router vue-resource --save
(安装 vue 路由模块 vue-router 和网络请求模块 vue-resource)。 - 项目目录如图
- 打开config目录中的index文件,将
port:3000
改为port:1999
(修改项目端口,以免与其它文件冲突)。 - cmd输入
npm run dev
浏览器弹出新页面显示一个VUE的大logo表示创建成功,不弹出页面输入localhost:1999也可以访问。 - 发现这个项目还用了一个vuex,没用过,先安上再说cmd输入
npm install --save vuex
(cmd先把vue服务关掉ctrl+c)。 -
看了看vuex文档,觉得如果把一个个vue组件当成一个个独立闭包函数,那vuex就相当于一个全局的json,里面有几个key:
State:用来存放变量, Mutations:用来存放函数(同步), Getters:State的计算属性,也是存放函数,但是当state属性改变时,Getters的返回值也会随之改变, Action:函数(异步)
在任意一个组件中都可以调用vuex(这是我目前对vuex的认识)。
- 发现项目是把vuex放到src文件夹的store文件夹里,咱们也来。在src中新建文件夹store,在store文件夹中新建文件index.js并输入几行代码,结果如图。
- vuex一个属性一个文件,再把所有属性汇聚的index里,挂到Store下输出
- 新建getters.js,actions.js,mutations.js文件,代码全都一样如图
- 现在vuex可以输出了,但是在哪里引用呢?打开main.js,修改后如图
- cmd输入
npm run dev
后显示下图则表示正常 - 准备工作先做这么多,下面准备写页面
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。