备注Weex开发
官网
https://weex.apache.org/zh/guide/use-vue-in-weex.html#支持的功能
安装环境
nodejs
npm
weex-cli
创建空项目（weex中命名使用小写）
weex create xxxx
cd到项目目录通过下面指令添加iOS工程项目
weex platform add ios
在iOS项目中配合写入环境配置、各类代理、自定义功能模块、自定义控件等
在Vue中实现布局样式，一些网络和计算JS的代码
在weex项目目录下，运行一下指令，在dist目录中提取iOS相关的JS文件，注意子文件夹层级保留，放入到iOS中的bundlejs目录下
npm run build
运行xcode项目，从默认index.js目录开始启动（也可以自定义为其他的路径）
备注：weex版本提醒了0.18找不到的问题
修改为引用
pod 'WeexSDK', :git => 'https://github.com/bmfe/WeexiOSSDK.git', :tag => '0.19'
一个基于weex的封装
#Eros iOS 基础库
pod 'ErosPluginBaseLibrary'
webpack.common.conf.js 文件配置（搜索Vue文件添加到webpack打包目录中）
const path = require('path');
const fs = require('fs-extra');
const webpack = require('webpack');
const config = require('./config');
const helper = require('./helper');
const glob = require('glob');
const vueLoaderConfig = require('./vue-loader.conf');
const vueWebTemp = helper.rootNode(config.templateDir);
const hasPluginInstalled = fs.existsSync(helper.rootNode(config.pluginFilePath));
const isWin = /^win/.test(process.platform);
const webEntry = {};
const weexEntry = {};
// Wraping the entry file for web.
const getEntryFileContent = (entryPath, vueFilePath) => {
let relativeVuePath = path.relative(path.join(entryPath, '../'), vueFilePath);
let relativeEntryPath = helper.root(config.entryFilePath);
let relativePluginPath = helper.rootNode(config.pluginFilePath);
let contents = '';
let entryContents = fs.readFileSync(relativeEntryPath).toString();
if (isWin) {
relativeVuePath = relativeVuePath.replace(/\\/g, '\\\\');
relativePluginPath = relativePluginPath.replace(/\\/g, '\\\\');
}
if (hasPluginInstalled) {
contents += `\n// If detact plugins/plugin.js is exist, import and the plugin.js\n`;
contents += `import plugins from '${relativePluginPath}';\n`;
contents += `plugins.forEach(function (plugin) {\n\tweex.install(plugin)\n});\n\n`;
entryContents = entryContents.replace(/weex\.init/, match => `${contents}${match}`);
contents = ''
}
contents += `\nconst App = require('${relativeVuePath}');\n`;
contents += `new Vue(Vue.util.extend({el: '#root'}, App));\n`;
return entryContents + contents;
}
// Retrieve entry file mappings by function recursion
const getEntryFile = (dir) => {
dir = dir || '.';
const directory = helper.root(dir);
fs.readdirSync(directory).forEach((file) => {
const fullpath = path.join(directory, file);
const stat = fs.statSync(fullpath);
const extname = path.extname(fullpath);
if (stat.isFile() && extname === '.vue') {
const name = path.join(dir, path.basename(file, extname));
if (extname === '.vue') {
const entryFile = path.join(vueWebTemp, dir, path.basename(file, extname) + '.js');
fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath));
webEntry[name] = entryFile;
}
weexEntry[name] = fullpath + '?entry=true';
}
else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
const subdir = path.join(dir, file);
getEntryFile(subdir);
}
});
}
// The entry file for web needs to add some library. such as vue, weex-vue-render
// 1. src/entry.js
// import Vue from 'vue';
// import weex from 'weex-vue-render';
// weex.init(Vue);
// 2. src/router/index.js
// import Vue from 'vue'
getEntryFile();
/**
* Plugins for webpack configuration.
*/
const plugins = [
/**
* Plugin: webpack.DefinePlugin
* Description: The DefinePlugin allows you to create global constants which can be configured at compile time.
*
* See: https://webpack.js.org/plugins/define-plugin/
*/
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': config.dev.env
}
}),
/*
* Plugin: BannerPlugin
* Description: Adds a banner to the top of each generated chunk.
* See: https://webpack.js.org/plugins/banner-plugin/
*/
new webpack.BannerPlugin({
banner: '// { "framework": "Vue"} \n',
raw: true,
exclude: 'Vue'
})
];
// Config for compile jsbundle for web.
const webConfig = {
entry: Object.assign(webEntry, {
'vendor': [path.resolve('node_modules/phantom-limb/index.js')]
}),
output: {
path: helper.rootNode('./dist'),
filename: '[name].web.js'
},
/**
* Options affecting the resolving of modules.
* See http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': helper.resolve('src')
}
},
/*
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
// webpack 2.0
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: config.excludeModuleReg
},
{
test: /\.vue(\?[^?]+)?$/,
use: [{
loader: 'vue-loader',
options: Object.assign(vueLoaderConfig({useVue: true, usePostCSS: false}), {
/**
* important! should use postTransformNode to add $processStyle for
* inline style prefixing.
*/
optimizeSSR: false,
compilerModules: [{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}]
})
}],
exclude: config.excludeModuleReg
}
]
},
/*
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: plugins
};
// Config for compile jsbundle for native.
const weexConfig = {
entry: weexEntry,
output: {
path: path.join(__dirname, '../dist'),
filename: '[name].js'
},
/**
* Options affecting the resolving of modules.
* See http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': helper.resolve('src')
}
},
/*
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: config.excludeModuleReg
},
{
test: /\.vue(\?[^?]+)?$/,
use: [{
loader: 'weex-loader',
options: vueLoaderConfig({useVue: false})
}],
exclude: config.excludeModuleReg
}
]
},
/*
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: plugins,
/*
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: config.nodeConfiguration
};
module.exports = [webConfig, weexConfig];
