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

详解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代码检查

代码检查是必要的操作，为了能http://够拥有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, fhttp://ile)

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）

项目启动

git clone git@github.com:osmartian/weex-frame.git

cd weex-frame

npm install

执行 ./start

android 启动

打开andorid studio

File -> New -> Import Project -> weex-frame/android -> 启动

iOS 启动

cd ios

pod install (未安装pod，请先安装)

open WeexFrame.xcworkspace

h5 启动方式

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

项目示例

android 端示例

iOS 端示例

结语

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

框架项目地址：weex-frame_jb51.rar

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。