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

前言

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

工作原理

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

开发环境搭建

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依赖

rush:js;"> "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 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,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

rush:js;"> 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$/,exclude: /node_modules/ } ],loaders: [ { test: /\.js$/,loader: 'babel',{ 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')

项目结构

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