搭建webpack+vue.js前端开发框架实战

搭建webpack+vue.js前端开发框架实战

#搭建webpack+vue.js前端开发框架实战

##项目展示

vue文档链接：

vue2.0中文文档

vue1.0文档

cnpm i //webpack webpack -w //npm run build webpack-dev-server

2、mock数据 启用json-server插件 在mock文件夹启动

json-server mock/mock.js --watch --port 8080

3、配置host：将htmlk-映射到localhost，这个方法实现前后端联调 (ps:当然也可以去项目中把html-改回localhost)

127.0.0.1 localhost htmlk-

##开始开发 ###1、环境要求：安装node.js ###2、npm下在组件： （ps：如果用package.json 不能安装，就新建一个package.json,一个个安装。观察那个出错，node-sass很难安装）

//webpack cnpm i webpack -g cnpm i webpack -d //webpack服务 cnpm i webpack-dev-server -D //loader cnpm i css-loader style-loader sass-loader string-loader -D //babel-core：ES2015编译核心
//babel-loader：编译写入ES2015文档
//babel-preset-es2015：ES2015语法
cnpm i babel-core babel-loader babel-preset-es2015 -D // cnpm i extract-text-webpack-plugin -D //node-sass 这个有点难装 cnpm node-sass -D //vue 组件 cnpm i vue-router vue-resource vue-html-laoder -D

###3、需要用到的命令：

启动服务：webpack-dev-server 实时：webpack-dev-server --inline --hot 监控代码：webpack -watch......

###4、package.json

{ "name": "www", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack-dev-server --inline --hot" }, "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.16.0", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.16.0", "css-loader": "^0.25.0", "extract-text-webpack-plugin": "^1.0.1", "node-sass": "^3.10.1", "sass-loader": "^4.0.2", "string-loader": "^0.0.1", "style-loader": "^0.13.1", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.2" } }

###5、在引用es2015、react的时候需要新建 .babelrc 文件

{ "presets":["es2015","react"] }

vue-resource：通过 XMLHttpRequest 或 JSONP 发起请求并处理响应。（版本：vue-resource v1.0.3)

vue-async-data：异步加载数据插件。

vue-validator：表单验证插件。

vue-devtools：Chrome 开发者工具扩展，用于调试 Vue.js 应用。

vue-touch：使用 Hammer.js 添加触摸手势指令。

vue-element：使用 Vue.js 注册自定义元素。

vue-animated-list： 方便的为 v-for 渲染的列表添加动画。 ###8、json-server使用

cnpm i json-server -D //启动命令 json-server mock/mock.js --watch --port 8080

###9、vuex使用 文档：https://github.com/vuejs/vuex/blob/1.0/docs/zh-cn/tutorial.md 写好vuex各个js文件

//每个页面包括以下：change去改变 import {changeIndex} from "../vuex/actions"; export default { vuex:{ actions:{ change:changeIndex } }, ready(){ this.change(2) } } ``` ```javascript //index.vue里面footer的html

//在切换的地方（eg：footer） import {changeIndex} from "../vuex/actions.js"; import { getIndex } from '../vuex/getters'; export default { vuex: { actions: { change:changeIndex }, getters: { curIndex: getIndex } }, ready(){ this.change(2) }, methods:{ changPage(index){ this.change(index); console.log(index); } } }

###TODO 1、瀑布流未能实现

实现：1、使用以前的方法做一个waterfallutil.js 在本项目lib里面 2、使用vue组件waterfall 升级vue2.0实现

2、没有做懒加载，导致页面卡断。

3、目前vue版本是1.0，后面升级到2.0。敬请期待！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。