返回 登录
0

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

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344

项目展示
1、引导页:(可以左右滑动,点击登录可以跳转进入登录页,点击直接进入官网)
图片描述
引导
图片描述
登录

2、首页:(ps:可下拉刷新加载)
图片描述
首页

3、发现页:(ps:点击热门推荐可以查看详情页)
图片描述
搜索页

4、详情页
图片描述
详情页

5、信息页:(ps:可以左右无限滑动,点击navbar)
图片描述
信息

如何run本项目

1、首先下载本代码,并安装依赖(确保网络通畅,网路不好请一个一个下载),并使用webpack-server启动服务

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:将www.htmlk.cn映射到localhost,这个方法实现前后端联调

(ps:当然也可以去项目中把www.html.cn改回localhost)

127.0.0.1 localhost www.htmlk.cn

开始开发

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编译核心<br/>
    //babel-loader:编译写入ES2015文档<br/>
    //babel-preset-es2015:ES2015语法<br/>
    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"]
    }

6、项目目录文件及webpack.config.js
图片描述
Alt text

7、vue的插件

vue:(版本:Vue.js v1.0.260

vue-router:Vue.js 官方路由。与 Vue.js 内核深度整合,让构建单页应用易如反掌。(版本:vue-router v0.7.13)

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
<footer id="footer">
      <ul>
        <li v-bind:class="curIndex==$index?'active':''" v-on:click="changPage($index)" v-for="tab in tabList" v-link="{path:tab.path}"><i class="iconfont">{{{tab.icon}}}</i><span>{{tab.name}}</span></li>
      </ul>
    </footer>
``

    //在切换的地方(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。敬请期待!

ps(已经更新至vue2.0了;[ https://github.com/htmlk/vue2.0]

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344

评论