如题: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版本应用程序。
有兴趣的朋友可以跑一下github.com/icepy/index…这个项目,这里有完整的例子来阐述如何将Vue Cli创建的Vue2.0项目改造成同时可以运行在Weex环境中。
你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。
更多精彩内容可关注我的个人微信公众号:搜索fed-talk或者扫描下列二维码,也欢迎您将它分享给自己的朋友。