Introduction

::: warning warning This document is for the Weex CLI 2.x version. For the old version of the Weex CLI documentation, please go to here. :::

Weex CLI is dedicated to standardizing the tool base in the Weex ecosystem. It ensures that various build tools can be seamlessly connected based on smart default configuration, so you can focus on writing applications without having to spend days tangling configuration issues.

System Components

Weex CLI split each function module into separate parts, if you see our source code , you will find that we manage multiple separate releases in the repository via Lerna Package, providing the following functional modules:

• The @weex-cli/core:
  • upgradeable;
  • Ability to customize through plugins and extensions;
  • Provide globally configurable files;
• The @weex-cli/generator module can quickly init the official project.
• The @weex-cli/compile module can quickly configuration compile Weex file.
• The @weex-cli/preview module can quickly preview the Weex page.
• The @weex-cli/debug module compiles and debugs the Weex page.
• The @weex-cli/doctor module quickly checks the user's local development environment.
• The @weex-cli/lint module performs quality diagnostics on local .vue files.
• The @weex-cli/device module quickly manages user local devices.
• The @weex-cli/run module runs the iOS/Android/Web project quickly.

How to use

::: warning Warning If you don't have node.js installed locally, you can go to Nodejs official website to download and install, and make sure your node version is >=7.6.0, you can use n to perform version management of node. :::

Installation

If you have problems during the installation process, you can do a question search and feedback at here.

$ npm install weex-toolkit -g

Commands

Create a project

# Create a project from the official template
$ weex create my-project

The @weex-cli/generator module uses download-git-repo to download the template file. The download-git-repo tool allows You specify a specific branch and remote repository address for project download, and the specified branch is separated by the (#) symbol.

The template format under the download specific branch is as follows:

$ weex create '<template-name>#<branch-name>' <project-name>

E.g:

$ weex create weex-templates/webpack#v1.0 my-project

This command will initialize the project via the v1.0 branch of the weex-templates/webpack project.

You can create project templates from official templates or remote sources, or you can create your own weex project templates. For more details you can see [How to create your own templates](https://github.com/weex-templates /How-to-create-your-own-template).

Compile page

The @weex-cli/compile module provides the ability to compile .vue files in Weex projects. You can use them in official projects, or you can directly compile sandboxes with zero configuration for a single .vue file, use as follows:

$ weex compile [resource file] [product address] <options>

E.g:

$ weex compile src build

or

$ weex compile src/index.vue build

Options

Options	Description
-w, --watch	Listen for file changes and compile in real time [Default: true]
-d,--devtool [devtool]	Set the devtool option for webpack compilation
-e,--ext [ext]	Set the default build file [Default: .vue]
-m, --min	Code obfuscation and compression of the product [Default: false]
-c, --config	Incoming webpack configuration file [Default: false]
-b, --base	Set the base path [Default: process.cwd()]

Preview page

The @weex-cli/preview module provides the ability to compile and preview .vue files in Weex projects. You can use them in official projects, or you can directly perform a sandbox preview of zero configuration for a single .vue file, use as follows:

$ weex preview [file | folder] <options>

The browser will automatically open the preview page and you can see the layout and effects of your weex page. If you have Weex Playground App installed on your device, you can also view the page by scanning the QR code on the page.

Using the command below, you will be able to preview the .vue file in the entire folder.

$ weex src --entry src/foo.vue

You need to specify the folder path to be previewed and the entry file (passed in --entry).

Options

Options	Description
-d,--devtool [devtool]	Set the devtool option for webpack compilation
-m, --min	Code obfuscation and compression of the product [Default: false]
-c, --config	Incoming webpack configuration file [Default: false]
-b, --base	Set the base path [Default: process.cwd()]

Add iOS/Android project

The @weex-cli/generator module provides the ability to add Weex official iOS/Android engineering features.

Use the weex platform [add|remove] [ios|android] command to add or remove the iOS/Android project template.

$ weex platform add ios
$ weex platform remove ios

This command is only valid in the official weex project. Please note the project structure. You can use weex platform list to view the supported platforms in your project.

Running iOS/Android Project

The @weex-cli/run module provides the ability to add and run Weex official iOS/Android project functions, which you can use with the following commands:

# Run iOS Simulator Preview
$ weex run ios
# Run Android Simulator / Real Machine Preview
$ weex run android
# Run web preview
$ weex run web

Debugging page

The @weex-cli/debug module provides debugging capabilities for Weex pages, which can be started with the following command:

$ weex debug [we_file|bundles_dir] [options]

Options

Options	Description
-p, --port [port]	Set the port of the debug server, [default: 8088]
--manual	When this option is enabled, the browser will not open automatically, [Default: false]
--channelid	Specify debug channel ID
--remote-debug-port [port]	Set the debug server port number, [default: 9222]

How to integrate debugging tools into your own app

Reference documentation:

• [1] Integrated Weex Debugging Tool (Android)
• [2] Integrated Weex Debugging Tool (iOS)

Code Quality Check

The @weex-cli/lint module provides a Weex code quality check function that can be started with the following command:

$ weex lint [file | folder] <options>

Options

@weex-cli/lint The built-in eslint module is used for code quality verification. For options, please refer to ESLint CLI.

If you want to add the weex code quality check to your project, you can also add the eslint plugin eslint-plugin-weex Way to use.

Development Environment Check

The @weex-cli/doctor module provides a check for the local development environment and can be started with the following command:

$ weex doctor

This command will check your local development environment, you can adjust your development environment according to the prompts, in order to develop the weex page.