技术 | 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环境中。

你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。

原文发布于微信公众号 - 子曰五溪(fed-talk)

原文发表时间:2019-05-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券