webpack+vue+vuex 构建的实例项目
发布于 7 个月前 作者 193Eric 5000 次浏览 来自 分享

webpack-vue-demo

webpack+vue+vueRouter+vuex+es6 构建的简单实例项目

github地址 https://github.com/193Eric/webpack-vue-vueRouter

如果对您有帮助,您可以点右上角 “Star” 支持一下 谢谢! ^_^

如果你觉得对你有帮助,可以点击folk,或者follow一下,我会不定时跟新一些有趣的东西.~~~ 0.0

对于vuex,就像rudux的作者所说的"您自会知道什么时候需要它"
为了理解vuex,demo中运用了vuex来对底部Icon进行变化。

Vuex

Vuex是专门为 Vue.js 设计的状态管理库

首先是创建一个 store ,里面有:

  • state(状态)
  • mutations(引发状态改变的方法)

然后在每次对数据对象进行操作的时候,进行commit(mutations 的方法名)用来触发mutations的方法来改变state状态…

vue的组件中都有computed,当state改变的时候会触发computed,所以我们就可以根据state的值,对页面进行修改。

暂时只增加了6个功能,虽然是个小demo,不过能用上的技术,基本上都用上了,适合初学者学习。

Demo的主要功能有:

  • 查询当日运势
  • 搞笑图片
  • 查询当前ip
  • 英汉互译
  • 历史上的今天
  • 每日励志英文
演示效果(部分图片)

page1.pngpage2.pngpage3.png page4.png page5.png

环境
  1. node v6.10.1
  2. cnpm 4.5.0
  3. npm 3.10.10
技术栈

[vue]

[vue-router]

[vuex]

[vue-resource]

[webpack]

[es6-babel]

[less]

目录结构

<pre> . ├── README.md
├── dist // 项目build目录 ├── package.json // 项目配置文件 ├── src // 生产目录 │ ├── assets // css js 和图片资源 │ ├── components // 各种组件 │ ├── views // 各种页面 │ ├── router.js // 路由配置 │ └── app.vue // 根组件 │ └── main.js // Webpack 预编译入口
├── index.html // 项目入口文件 ├── webpack.config.js //webpack配置文件 ├── .gitignore //git忽略文件 </pre>

安装

项目地址:(使用git clone

git clone https://github.com/193Eric/webpack-vue-vueRouter.git

通过npm安装本地服务第三方依赖模块(需要已安装Node.js),使用npm安装依赖模块可能会很慢,建议换成cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org
# 安装依赖模块
cnpm install

npm run build

npm run dev


然后会自动弹出浏览器地址 http://localhost:8081
17 回复

请问什么录软件啊?mac可以用吗?找了几款决定太大了不好用

❤️点赞一个

排版乱了,,

来自酷炫的 CNodeMD

谢谢分享 — From LBRC

建议你在入口文件中增加以下两句,并且npm install引入相应的包

require(‘es6-promise’).polyfill(); require(‘isomorphic-fetch’);

这样可以支持非es6语法支持的浏览器,能让你的程序更健壮

回到顶部