公司目前决定使用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 引用过去,应该一样可以实现。 下一步再做实践。




          
Logo

前往低代码交流专区

更多推荐