# Introduction
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 theiOS/Android/Web
project quickly.
# How to use
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:
# 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.