Appcan+vue+vux+webpack开发app(原创)

      公司目前决定使用appcan作为移动端的开发，作为appcan新手初入坑，对于界面、MVVM、IDE感到诸多不爽。目前有很多精美的移动UI框架很想集成过来使用，同时又不想抛弃MVVM，还想换个IDE，本人还是喜欢WebStorm、Idea。

      vue.js 目前如火如荼，不像angular.js那样繁重，属于轻量级的mvvm框架，能不能将vue.js集成过来，代替appcan目前的mvvm框架，同时能有一款前端UI框架支持vue(反正我是写的appcan的UI不爽)，目前vux作为vue的最佳组合，界面样式仿照weui非常不错的一个开源项目。

    1. 新建VUX项目

      项目地址   界面还是相当不错的，而且有丰富的脚手架。

         首先简单介绍一下  vux项目是基于 vue和webpack、node.js 的。

      webpack将项目最终build成了静态资源 ， 想到这里 就可以移植到appcan中打包了。

      vux项目 build 成静态资源是有些坑 （vux项目的新建 参考官网，不再介绍了）

         新建项目后，我们 npm run dev 可以预览调试项目

      npm run build 可以打包项目，在打包项目发现和预览调试的时候不一样，打包后主页空白，原来是js的路径没有配置正确，在src 目录的index.js 中修改 

// see http://vuejs-templates.github.io/webpack for documentation.

var path = require('path')

module.exports = {

  build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: './',//这里修改为相对路径

    productionSourceMap: true,

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

  },

  dev: {

    env: require('./dev.env'),

    port: 8080,

    autoOpenBrowser: false,

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {},

    // CSS Sourcemaps off by default because relative paths are "buggy"

    // with this option, according to the CSS-Loader README

    // (https://github.com/webpack/css-loader#sourcemaps)

    // In our experience, they generally work as expected,

    // just be aware of this issue when enabling this option.

    cssSourceMap: false

  }

}

          执行打包命令后，会在dist 文件下 生成 静态资源

 

我们将文件夹拷贝到 appcan的空项目中，替换原来的index.html 删除冗余js和css 文件。

云端打包后运行正常，而且很轻量级。

          

鉴于此，确实方便了开发，唉感觉突然抛弃了appcan，只用了它的打包，主要针对一些单纯的web项目性质的app 使用此方式可以大大提高效率和效果，对于调用原生的插件，目前想到的可以把appcan的js 引用过去，应该一样可以实现。下一步再做实践。