1.4 vue-cli命令行

创建uni-app项目除了可以使用HBuilderX可视化界面，也可以使用vue-cli命令行。

1.4.1 开发环境配置

使用vue-cli命令行之前需要安装Node.js。Node.js是一个基于Chrome V8引擎的JavaScript运行环境。 Node.js使用高效、轻量级的事件驱动及非阻塞I/O模型，它的软件包管理工具npm是目前最大的开源生态系统。Node.js的安装配置方法如下。

步骤01 进入Node.js官方网站，下载Node.js安装包，这里下载稳定版，即Recommended For Most Users版本，如图1-21所示。

步骤02 双击下载的文件进行安装即可。Node.js安装完毕后，出现图1-22所示的界面，单击【Finish】按钮即可。

步骤03 按快捷键【Windows+R】调出运行窗口，输入【cmd】，打开命令提示工具，在命令提示工具中输入【node -v】，若出现图1-23所示的界面，则表示安装成功。

步骤04 全局安装vue-cli。在命令提示工具中输入【npm install -g @vue/cli】命令即可全局安装vue-cli，如图1-24所示。

1.4.2 使用vue-cli创建uni-app

创建正式版的uni-app项目（对应HBuilderX最新正式版）的代码如下。

创建Alpha版的uni-app项目（对应HBuilderX最新Alpha版）的代码如下。

uni-app项目创建完成后，系统会提示选择项目模板，初次使用建议选择【Hello uni-app】项目模板，如图1-25所示。

如果选择【自定义模板】，需要填写uni-app模板地址，该地址就是托管在云端的仓库地址。以GitHub为例，其地址格式为“用户名/仓库名”。例如，使用下载图片模板，需要填写dcloudio/uni-template-picture这个uni-app模板地址。

1.4.3 通过命令行运行、发布uni-app

输入以下命令，即可完成uni-app的运行和发布。

其中，%PLATFORM%可取值如表1-1所示。

除了表中的可取值，还可以自定义更多条件编译平台，如钉钉小程序，具体操作可以参考官网package.json文档（网址见“资源文件\网址索引.docx”）。

其中，快应用的运行和发布方式有以下两种。

（1）类小程序WebView渲染方式。

（2）原生渲染方式。

温馨提示

目前使用npm run build:app-plus会在/dist/build/app-plus下生成App打包资源。如需制作wgt包，应将app-plus中的文件压缩成zip格式（注意：不要包含app-plus目录），再重命名为${appid}.wgt， AppID为manifest.json文件中的AppID。

dev模式编译出的各平台代码存放于根目录下的/dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（H5平台不会在此目录下，其代码存在于缓存中）；build模式编译出的各平台代码存放于根目录下的/dist/build/目录，发布时选择此目录。

dev模式和build模式的区别如下。

（1）dev模式有SourceMap ，可以方便地进行断点调试。

（2）build模式会将代码进行压缩，体积更小，更适合发布为正式版应用。

（3）进行环境判断时，dev模式process.env.NODE_ENV的值为development，build模式process.env. NODE_ENV的值为production。