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

孔亚洲

5125人浏览 · 2017-07-03 20:23:02

孔亚洲 · 2017-07-03 20:23:02 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^