详解Weex基于Vue2.0开发模板搭建


Posted in Javascript onMarch 20, 2017

前言

最近有一些人反馈说在面试过程中常常被问到weex相关的知识,也侧面反映的weex的发展还是很可观的,可是目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,今天和大家分享一下weex基于vue2.0的开发框架模板~

工作原理

先简单熟悉一下weex的工作原理,这里引用一下weex官网上的一直图片,详细信息见官网

详解Weex基于Vue2.0开发模板搭建

开发环境搭建

weex 开发环境搭建

关于weex开发环境搭建问题见官方文档

android 、iOS 开发环境

关于native开发环境搭建问题见官方文档

框架说明

基于vue2.0搭建

像前面说的那样weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,所以也建议开发者不要在用.we做后缀来开发了

多页模式(抛弃vue-router)

单页形态对于原生可能体验不够好,目前在 native App 里单页模式不太合适

集成三端(android、ios、h5平台)

关于android、ios、h5平台的集成与打包问题,在项目中都以解决~

集成eslint代码检查

代码检查是必要的操作,为了能够拥有vue开发的体验,将eslint集成进来~

注:

由于weexpack暂不支持vue问题,打包相关后续会集成进来~

框架介绍

package.json依赖

"dependencies": {
  "vue": "^2.1.8",
  "vue-router": "^2.1.1",
  "vuex": "^2.1.1",
  "vuex-router-sync": "^4.0.1",
  "weex-vue-render": "^0.1.4"
 },
 "devDependencies": {
  "babel-core": "^6.20.0",
  "babel-eslint": "^7.1.1",
  "babel-loader": "^6.2.9",
  "babel-preset-es2015": "^6.18.0",
  "css-loader": "^0.26.1",
  "eslint": "^3.15.0",
  "eslint-config-standard": "^6.2.1",
  "eslint-loader": "^1.6.1",
  "eslint-plugin-html": "^2.0.1",
  "eslint-plugin-promise": "^3.4.2",
  "eslint-plugin-standard": "^2.0.1",
  "postcss-cssnext": "^2.9.0",
  "serve": "^1.4.0",
  "vue-loader": "^10.0.2",
  "vue-template-compiler": "^2.1.8",
  "webpack": "^1.14.0",
  "weex-devtool": "^0.2.64",
  "weex-loader": "^0.4.1",
  "weex-vue-loader": "^0.2.5"
 }

打包配置

1、 遍历.vue文件后缀,生成相应的entry.js文件

function getEntryFileContent (entryPath, vueFilePath) {
 const relativePath = path.relative(path.join(entryPath, '../'), vueFilePath);
 return 'var App = require(\'' + relativePath + '\')\n'
  + 'App.el = \'#root\'\n'
  + 'new Vue(App)\n'
}

function walk (dir) {
 dir = dir || '.'
 let directory = path.join(__dirname, './src', dir)
 let entryDirectory = path.join(__dirname, './src/entry');
 fs.readdirSync(directory)
  .forEach(file => {
   let fullpath = path.join(directory, file)
   let stat = fs.statSync(fullpath)
   let extname = path.extname(fullpath)
   if (stat.isFile() && extname === '.vue') {
    let entryFile = path.join(entryDirectory, dir, path.basename(file, extname) + '.js')
    fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath))
    let name = path.join(dir, path.basename(file, extname))
    entry[name] = entryFile + '?entry=true'
   } else if (stat.isDirectory()) {
    let subdir = path.join(dir, file)
    walk(subdir)
   }
  })
}

walk()

2、通过weex-loader打包生成native jsbundle

3、 通过weex-vue-loader打包生成web jsbundle

function getBaseConfig () {
 return {
  entry: entry,
  output: {
   path: 'dist'
  },
  resolve: {
   extensions: ['', '.js', '.vue'],
   fallback: [path.join(__dirname, './node_modules')],
   alias: {
    'assets': path.resolve(__dirname, './src/assets/'),
    'components': path.resolve(__dirname, './src/components/'),
    'constants': path.resolve(__dirname, './src/constants/'),
    'api': path.resolve(__dirname, './src/api/'),
    'router': path.resolve(__dirname, './src/router/'),
    'store': path.resolve(__dirname, './src/store/'),
    'views': path.resolve(__dirname, './src/views/'),
    'config': path.resolve(__dirname, './config'),
    'utils': path.resolve(__dirname, './src/utils/')
   }
  },
  module: {
   preLoaders: [
    {
     test: /\.vue$/,
     loader: 'eslint',
     exclude: /node_modules/
    },
    {
     test: /\.js$/,
     loader: 'eslint',
     exclude: /node_modules/
    }
   ],
   loaders: [
    {
     test: /\.js$/,
     loader: 'babel',
     exclude: /node_modules/
    }, {
     test: /\.vue(\?[^?]+)?$/,
     loaders: []
    }
   ]
  },
  vue: {
   postcss: [cssnext({
    features: {
     autoprefixer: false
    }
   })]
  },
  plugins: [bannerPlugin]
 }
}

const webConfig = getBaseConfig()
webConfig.output.filename = 'web/[name].js'
webConfig.module.loaders[1].loaders.push('vue')

const weexConfig = getBaseConfig()
weexConfig.output.filename = 'weex/[name].js'
weexConfig.module.loaders[1].loaders.push('weex')

项目结构

weex-frame
├── android (android项目)
│    
├── ios (ios项目代码)
│
├── src (weex模块)
│   ├── api (api模块)
│   ├── components(组件模块) 
│   ├── constants(常量配置)  
│   ├── utils (工具模块)  
│   └── views(视图模块) 
│
└── dist (build输出模块)
    ├── weex (native使用jsbundle)
    └── web(web使用jsbundle)

项目启动

  1. git clone git@github.com:osmartian/weex-frame.git
  2. cd weex-frame
  3. npm install
  4. 执行 ./start

android 启动

  1. 打开andorid studio
  2. File -> New -> Import Project -> weex-frame/android -> 启动

iOS 启动

  1. cd ios
  2. pod install (未安装pod,请先安装)
  3. open WeexFrame.xcworkspace

h5 启动方式

打开 http://localhost:12580/weex.html

项目示例

详解Weex基于Vue2.0开发模板搭建

详解Weex基于Vue2.0开发模板搭建

android 端示例

详解Weex基于Vue2.0开发模板搭建

详解Weex基于Vue2.0开发模板搭建

详解Weex基于Vue2.0开发模板搭建

iOS 端示例

详解Weex基于Vue2.0开发模板搭建

详解Weex基于Vue2.0开发模板搭建

详解Weex基于Vue2.0开发模板搭建

结语

能看的出来上方的三端示例表现还是很一致的,本篇博文也是想给大家提供一个轮子,也欢迎大家多多提意见,共同促进weex生态成熟~

框架项目地址:weex-frame_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
greybox——不开新窗口看新的网页
Feb 20 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
vue.js指令v-model使用方法
Mar 20 #Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 #Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 #Javascript
vue.js中指令Directives详解
Mar 20 #Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 #Javascript
You might like
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python换行与不换行的输出实例
2020/02/19 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python代码区分大小写吗
2020/06/17 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
PHP如何自定义函数
2016/09/16 面试题
Jar包的作用是什么
2014/03/30 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
公司踏青活动方案
2014/08/16 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
村道德模范事迹材料
2014/08/28 职场文书
人事专员岗位职责
2015/02/03 职场文书
个人求职自荐信范文
2015/03/06 职场文书
超市员工辞职信范文
2015/05/12 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript