如题:Vue2.0项目改造成可以同时运行在Weex环境中
至于Vue Cli如何创建项目这一节大家可以参考官网上的几个小节:
$ npm install -g vue-cli
$ vue init webpack my-project
基于此运行npm run dev,你可以很快的跑起来一个Web项目。那么如果同一个项目,我想同时可以运行在Weex环境中,改如改造它?首先,我建议是把构建的环境区分好,在build目录下创建一个build-weex.js文件和webpack-weex-conf.js,这两个文件就是用专门处理构建weex bundle。
build-weex.js:
var webpack = require('webpack');
var chalk = require('chalk');
var webpackConfig = require('./webpack.weex.conf');
webpack(webpackConfig,function (err, stats) {
if (err) {
throw err
}
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow( ' Tip: weex bundle.js \n'))
});
webpack-weex-conf.js:
var webpack = require('webpack');
var config = {
entry: {
'vue-bundle': './src/weex.entry.js?entry=true'
},
output: {
path: 'dist',
filename: '[name].weex.js'
},
module: {
rules: [
{
test: /\.vue(\?[^?]+)?$/,
loaders: ['weex-loader'],
exclude: /node_modules/
},
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/
}
]
},
plugins: [
new webpack.BannerPlugin({
raw: true ,
banner: '// { "framework": "Vue" }\n'
})
],
watch: true
};
module.exports = config;
{ "framework": "Vue" } 这一行写入bundle文件的顶部非常重要,Weex SDK依据此来使用什么类型的runtime来渲染你的页面。
package.json中的scripts配置好你的命令如:"weex":"node build/build-weex.js",至此你的构建环境就准备好了,在webpack中的entry你配置了src/weex-entry.js,这就是你weex应用程序的入口,不过在此之前,你应该还要install三个模块,分别是:weex-html5,weex-vue-render,weex-loader。
我们创建同一个Hello.vue,两个入口文件,比如web-entry.js和weex-entry.js,那么他们分别是什么呢?
web-entry.js:
import Vue from 'vue';
import weexVueRender from 'weex-vue-render';
weexVueRender.install(Vue);
import Hello from './Hello.vue';
Hello.el = '#app';
new Vue(Hello);
weex-entry.js:
import Hello from './Hello.vue';
Hello.el = '#app';
new Vue(Hello);
在weex环境下,你不需要weexVueRender而已,其他照同,在构建时启用了两个命令来构建,比如npm run web构建的是Web版本应用程序,npm run weex构建的是Weex版本应用程序。
有兴趣的朋友可以跑一下https://github.com/icepy/index-oa-template/tree/weex这个项目,这里有完整的例子来阐述如何将Vue Cli创建的Vue2.0项目改造成同时可以运行在Weex环境中。
你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。