詳解Weex基于Vue2.0開(kāi)發(fā)模板搭建

2019-11-19 17:06:32

字體：大中小

供稿：網(wǎng)友

前言

最近有一些人反饋說(shuō)在面試過(guò)程中常常被問(wèn)到weex相關(guān)的知識(shí)，也側(cè)面反映的weex的發(fā)展還是很可觀的，可是目前weex的開(kāi)發(fā)者大多數(shù)是中小型公司或者個(gè)人，大公司屈指可數(shù)，揪其原因可能是基于weex的開(kāi)發(fā)正確的姿勢(shì)大家并沒(méi)有找到，而且市面上的好多輪子還是.we后綴的，眾所周知，weex和vue一直在努力的進(jìn)行生態(tài)互通，而且weex實(shí)現(xiàn)web標(biāo)準(zhǔn)化是早晚的問(wèn)題，今天和大家分享一下weex基于vue2.0的開(kāi)發(fā)框架模板~

工作原理

先簡(jiǎn)單熟悉一下weex的工作原理，這里引用一下weex官網(wǎng)上的一直圖片，詳細(xì)信息見(jiàn)官網(wǎng)

開(kāi)發(fā)環(huán)境搭建

weex 開(kāi)發(fā)環(huán)境搭建

關(guān)于weex開(kāi)發(fā)環(huán)境搭建問(wèn)題見(jiàn)官方文檔

android 、iOS 開(kāi)發(fā)環(huán)境

關(guān)于native開(kāi)發(fā)環(huán)境搭建問(wèn)題見(jiàn)官方文檔

框架說(shuō)明

基于vue2.0搭建

像前面說(shuō)的那樣weex和vue一直在努力的進(jìn)行生態(tài)互通，而且weex實(shí)現(xiàn)web標(biāo)準(zhǔn)化是早晚的問(wèn)題，所以也建議開(kāi)發(fā)者不要在用.we做后綴來(lái)開(kāi)發(fā)了

多頁(yè)模式（拋棄vue-router）

單頁(yè)形態(tài)對(duì)于原生可能體驗(yàn)不夠好，目前在 native App 里單頁(yè)模式不太合適

集成三端（android、ios、h5平臺(tái)）

關(guān)于android、ios、h5平臺(tái)的集成與打包問(wèn)題，在項(xiàng)目中都以解決~

集成eslint代碼檢查

代碼檢查是必要的操作，為了能夠擁有vue開(kāi)發(fā)的體驗(yàn)，將eslint集成進(jìn)來(lái)~

注：

由于weexpack暫不支持vue問(wèn)題，打包相關(guān)后續(xù)會(huì)集成進(jìn)來(lái)~

框架介紹

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文件后綴，生成相應(yīng)的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、通過(guò)weex-loader打包生成native jsbundle

3、通過(guò)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')

項(xiàng)目結(jié)構(gòu)

weex-frame├── android (android項(xiàng)目)│    ├── ios （ios項(xiàng)目代碼）│├── src （weex模塊）│   ├── api (api模塊)│   ├── components（組件模塊） │   ├── constants（常量配置）  │   ├── utils （工具模塊）  │   └── views（視圖模塊） │└── dist （build輸出模塊）    ├── weex (native使用jsbundle)    └── web（web使用jsbundle）

項(xiàng)目啟動(dòng)