You already have a Vue project, how can you quickly use it in the Weex project on the Android side?

how can a simple Vue project, such as a default project generated using vue init webpack hellovue , be quickly used in an Android-side Weex project?

the description of this in the official documentation is like gold, which is a little too brief for an Android developer who is just familiar with Vue.
after installing weex-loader , the next step will not be at all. For example, I can"t find "entry options for Webpack configuration" , I don"t know where to configure the code at both ends below, and I don"t know how to generate a file and put it in the assets folder of my Android project after configuration.

is it too basic? after looking for an article for a while, I found that I didn"t have an article that I could understand.
also ask the front-end boss for advice, throw a link ah, thank you!

excerpts from official documents are as follows:

compilation target
because of platform differences and to improve network performance, * .vue files need to be compiled in two different ways:

  • for the Web platform, you can compile source files in any formal way, such as using Webpack + vue-loader or Browserify + vueify to compile * .vue files.
  • for Android and iOS platforms, you need to use weex-loader to compile * .vue files. Different platforms using different bundles, can make full use of the original features of the platform and reduce the compatibility code during construction. But the source code is still the same, and the only difference is the way it is compiled.

use weex-loader
weex-loader is a webpack loader, that converts * .vue files into simple javascript modules for Android and iOS platforms. All the features and configurations are the same as vue-loader.
Note that if the entry option for your Webpack configuration is a * .vue file, you still need to pass an additional entry parameter.

const webpackConfig = {   // Add the entry parameter for the .vue file
entry: "./path/to/App.vue?entry=true"

  /* ... */

  use: {
    loaders: [{
      // matches the .vue file path which contains the entry parameter
      test: /\.vue(\?^^]+)?$/,
      loaders: ["weex-loader"]
    }]   
} } 

if you are using a .js file as an entry file, you don"t need to write those extra parameters. It is recommended that the javascript file be used for the entry file of webpack configuration.

{   entry: "./path/to/entry.js" }

Vue version: 2.9.3
weex version: compile "com.taobao.android:weex_sdk:0.18.0"

Vue project directory:

Mar.12,2021

has the landlord solved


Why not use weex's official scaffolding? First of all, your project is empty, there is no migration problem; second, if your project is completed, it should also be rewritten, because weex is different from web development, the style of writing, tag tags are different.

  • Weex Custom Component nesting problem

    after Weex customizes the drop-down refresh and loads more frames in Android, he wants to add sublayouts to Vue, but never shows them. ask the great gods for advice. Note: already registered using the following: WXSDKEngine.registerComponent ( "hoge...

    Apr.26,2021
Menu