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

更新時間：2017年03月20日 10:41:26 作者：王永迪

這篇文章主要介紹了詳解Weex基于Vue2.0開發(fā)模板搭建,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

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

工作原理

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

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

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

關于weex開發(fā)環(huán)境搭建問題見官方文檔

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

關于native開發(fā)環(huán)境搭建問題見官方文檔

框架說明

基于vue2.0搭建

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

多頁模式（拋棄vue-router）

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

集成三端（android、ios、h5平臺）

關于android、ios、h5平臺的集成與打包問題，在項目中都以解決~

集成eslint代碼檢查

代碼檢查是必要的操作，為了能夠擁有vue開發(fā)的體驗，將eslint集成進來~

注：

由于weexpack暫不支持vue問題，打包相關后續(xù)會集成進來~

框架介紹

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')

項目結(jié)構(gòu)

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

項目啟動