1.建立項目javascript
weexpack create weexapp
2.安裝必要插件css
npm i jwt-simple vue-resource vue-router vuex vuex-router-sync weex-ui -S npm i babel-plugin-component babel-preset-stage-0 history quick-local-ip weex-builder weex-router -D
3.修改 scripts 指令html
package.jsonvue
"scripts": { "build": "webpack", "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color", "dev": "webpack --config webpack.config.js --watch", "serve": "webpack-dev-server --config webpack.dev.js --progress --watch --open", "start": "webpack && webpack-dev-server --config webpack.dev.js --progress --watch --open", "create": "weexpack run android" },
4.配置 weex-uijava
.babelrcandroid
{ "presets": ["es2015", "stage-0"], "plugins": [ [ "component", { "libraryName": "weex-ui", "libDir": "packages" } ] ] }
5.修改 webpack 模塊管理webpack
webpack.config.jsgit
步驟一:web
步驟二:vue-router
步驟三:
步驟四:
步驟五:
修改後:
webpack.config.js
const pathTo = require('path'); const fs = require('fs-extra'); const webpack = require('webpack'); const entry = {index: pathTo.resolve('src', 'entry.js')}; const weexEntry = {index: pathTo.resolve('src', 'entry.js')}; const vueWebTemp = 'temp'; const hasPluginInstalled = fs.existsSync('./web/plugin.js'); var isWin = /^win/.test(process.platform); function getEntryFileContent(entryPath, vueFilePath) { let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath); let contents = ''; if (hasPluginInstalled) { const plugindir = pathTo.resolve('./web/plugin.js'); contents = 'require(\'' + plugindir + '\') \n'; } if (isWin) { relativePath = relativePath.replace(/\\/g,'\\\\'); } contents += 'var App = require(\'' + relativePath + '\')\n'; contents += 'App.el = \'#root\'\n'; contents += 'new Vue(App)\n'; return contents; } var fileType = ''; function walk(dir) { dir = dir || '.'; const directory = pathTo.join(__dirname, 'src', dir); fs.readdirSync(directory) .forEach((file) => { const fullpath = pathTo.join(directory, file); const stat = fs.statSync(fullpath); const extname = pathTo.extname(fullpath); const basename = pathTo.basename(fullpath); if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) { if (!fileType) { fileType = extname; } if (fileType && extname !== fileType) { console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!'); } const name = pathTo.join(dir, pathTo.basename(file, extname)); if (extname === '.vue') { const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js'); fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath)); entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true'; } weexEntry[name] = fullpath + '?entry=true'; } else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) { const subdir = pathTo.join(dir, file); walk(subdir); } }); } walk(); // web need vue-loader const plugins = [ new webpack.optimize.UglifyJsPlugin({minimize: true}), new webpack.BannerPlugin({ banner: '// { "framework": ' + (fileType === '.vue' ? '"Vue"' : '"Weex"') + '} \n', raw: true, exclude: 'Vue' }) ]; const webConfig = { context: pathTo.join(__dirname, ''), entry: entry, output: { path: pathTo.join(__dirname, 'dist'), filename: '[name].web.js', }, module: { // webpack 2.0 rules: [ { test: /\.js$/, use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }] }, { test: /\.css$/, use: [{ loader: 'css-loader' }] }, { test: /\.vue(\?[^?]+)?$/, use: [{ loader: 'vue-loader' }] } ] }, plugins: plugins }; const weexConfig = { entry: weexEntry, output: { path: pathTo.join(__dirname, 'dist'), filename: '[name].js', }, module: { rules: [ { test: /\.js$/, use: [{ loader: 'babel-loader', }] }, { test: /\.vue(\?[^?]+)?$/, use: [{ loader: 'weex-loader' }] }, { test: /\.we(\?[^?]+)?$/, use: [{ loader: 'weex-loader' }] } ], }, plugins: plugins, }; var exports = [webConfig, weexConfig]; module.exports = exports;
6.修改 webpack 開發環境文件
webpack.dev.js
const ip = require('quick-local-ip').getLocalIP4(); const configs = require('./webpack.config.js'); const webpack = require('webpack'); const pathTo = require('path'); const chalk = require('chalk'); let config = Array.isArray(configs) ? configs[0] : configs; config.devServer = { contentBase: pathTo.join(__dirname, ''), compress: true, // hot: true, host: '0.0.0.0', public: ip + ':8080/web', // publicPath: '/dist/', }; // configs.plugins.push(new webpack.HotModuleReplacementPlugin()); console.log('server is running! Please open ' + chalk.green('http://' + ip + ':8080/web/index.html')); module.exports = config;
7.提取 weex-ui 組件
項目名稱 / index.js
/** * weex-ui 經常使用組件 */ import Utils from './packages/utils'; import WxcButton from './packages/wxc-button'; import WxcCell from './packages/wxc-cell'; import WxcCheckbox from './packages/wxc-checkbox'; import WxcCheckboxList from './packages/wxc-checkbox-list'; import WxcCountdown from './packages/wxc-countdown'; import WxcDialog from './packages/wxc-dialog'; import WxcEpSlider from './packages/wxc-ep-slider'; import WxcPanItem from './packages/wxc-pan-item'; import WxcGridSelect from './packages/wxc-grid-select'; import WxcIndexlist from './packages/wxc-indexlist'; import WxcLightbox from './packages/wxc-lightbox'; import WxcLoading from './packages/wxc-loading'; import WxcPartLoading from './packages/wxc-part-loading'; import WxcMask from './packages/wxc-mask'; import WxcMinibar from './packages/wxc-minibar'; import WxcLotteryRain from './packages/wxc-lottery-rain'; import WxcNoticebar from './packages/wxc-noticebar'; import WxcOverlay from './packages/wxc-overlay'; import WxcPageCalendar from './packages/wxc-page-calendar'; import WxcPopup from './packages/wxc-popup'; import WxcProgress from './packages/wxc-progress'; import WxcRadio from './packages/wxc-radio'; import WxcResult from './packages/wxc-result'; import WxcRichText from './packages/wxc-rich-text'; import WxcSpecialRichText from './packages/wxc-special-rich-text'; import WxcSearchbar from './packages/wxc-searchbar'; import WxcSimpleFlow from './packages/wxc-simple-flow'; import WxcSlideNav from './packages/wxc-slide-nav'; import WxcSliderBar from './packages/wxc-slider-bar'; import WxcStepper from './packages/wxc-stepper'; import WxcTabPage from './packages/wxc-tab-page'; import WxcTabBar from './packages/wxc-tab-bar'; import WxcTag from './packages/wxc-tag'; export { Utils, WxcButton, WxcCell, WxcCheckbox, WxcCheckboxList, WxcCountdown, WxcDialog, WxcEpSlider, WxcPanItem, WxcGridSelect, WxcIndexlist, WxcLightbox, WxcLoading, WxcPartLoading, WxcMask, WxcMinibar, WxcLotteryRain, WxcNoticebar, WxcOverlay, WxcPageCalendar, WxcPopup, WxcProgress, WxcRadio, WxcResult, WxcRichText, WxcSpecialRichText, WxcSearchbar, WxcSimpleFlow, WxcSlideNav, WxcSliderBar, WxcStepper, WxcTabPage, WxcTabBar, WxcTag };
.