详解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 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 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
一个PHP的ZIP压缩类分享
2014/05/04 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jquery延迟对象解析
2016/10/26 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python安装requests库的实例代码
2019/06/25 Python
Python pandas库中的isnull()详解
2019/12/26 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
开业庆典主持词
2014/03/21 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
培训通知书模板
2015/04/17 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
举起手来观后感
2015/06/09 职场文书
热血教师观后感
2015/06/10 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Go语言测试库testify使用学习
2022/07/23 Golang
postgresql中如何执行sql文件
2023/05/08 PostgreSQL