# Introduction
warning
This document is for the Weex CLI2.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/generatormodule can quickly init the official project. - The
@weex-cli/compilemodule can quickly configuration compile Weex file. - The
@weex-cli/previewmodule can quickly preview the Weex page. - The
@weex-cli/debugmodule compiles and debugs the Weex page. - The
@weex-cli/doctormodule quickly checks the user's local development environment. - The
@weex-cli/lintmodule performs quality diagnostics on local.vuefiles. - The
@weex-cli/devicemodule quickly manages user local devices. - The
@weex-cli/runmodule runs theiOS/Android/Webproject 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.