vue组件化开发-示例 vue2.0

- vue-loader/
  + package.json //npm配置文件
  + index.html //入口html
  - node_modules //npm加载的模块
  - build //webpack 配置文件
    + webpack.base.config.js //基本配置
    + webpack.dev.config.js //开发环境
    + webpack.product.config.js //生产环境
  - src //开发资源目录
    - assets //一些资源
      + css  
      + js
      + img
    - components //vue组件
      + home.vue 
      + index.vue
      + user.vue
      + userDetails.vue
  -vuex  //状态等管理
    -actions  
      +indexActions.js
      ...
    -modles
      +indexModles.js
      ...
    +getters.js
    +mutation-types.js
    +store.js
    + app.vue //布局文件
    + main.js  //入口文件
    + filter.js //vue的过滤器
    + router.js //vue路由插件

npm install

npm run dev 

浏览器中访问：localhost:8000

npm run build

webpack : 前端模块化打包工具
vue.js  : vue.js  清量级的mvvm的框架
babel   : 项目使用babel编译 可用最新的es6编写我们的javascript （当然用es5写也是一样的）
vue-loader ：模块化的开发vue插件
vue-router ：vue的路由插件
vuex  :  一个专门为 Vue.js 应用设计的状态管理架构

var HttpPushWebpackPlugin = require('http-push-webpack-plugin');  //http-push

// webpack http-push 上传
if(process.env.HTTP_PUSH === 'http-push' ){
    config.plugins = (config.plugins || []).concat([
        new HttpPushWebpackPlugin({
            receiver: 'http://xxx.com/receiver', // 服务端文件上传接口
            token: 'webpack', // 验证token
            to: '../../html/wangwei', // 注意这个是指的是测试机器的路径，而非本地机器
        }),
    ])
};

"http-push": "cross-env HTTP_PUSH=http-push webpack -p --progress --hide-modules --colors --config build/webpack.product.config.js",

"fis3" , //全局安装  
"fis3-deploy-http-push": "^2.0.6"  //项目依赖安装

fis.media('qa').match('dist/test/**', {
  deploy: fis.plugin('http-push', {
    receiver: 'http://xxx.com/receiver',
    to: '../../html/wangwei', // 注意这个是指的是测试机器的路径，而非本地机器
    data: {
      base: 'dist/test'
    }
  })
});