技术 | Vue Cli创建的Vue 2.0项目改造成可以同时运行Weex环境下
技术 | Vue Cli创建的Vue 2.0项目改造成可以同时运行Weex环境下
如题：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环境中。
你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦。
腾讯云开发者
