uni-app开发环境配置及混合开发流程

uni-app开发环境配置及混合开发流程 NodeJS开发环境

安装NVM

下载安装

NVM是一个支持多版本NodeJS的版本管理工具，如果本机已安装了NodeJS建议先卸载。

下载NodeJS

解压后直接运行安装：设置好安装目录及后面NodeJs的安装目录。

配置环境变量

路径对应你安装时给定的安装目录

验证安装

命令行下执行：

nvm –v

显示信息如下：

　　　　　　

安装NodeJS

打开命令行操作窗口进行以下步骤

安装

npm install <version> [<arch>]

<version>表示要安装的版本; arch参数表示系统位数，默认是64位，如果是32位操作系统，需要执行命令：nvm install <version> 32

特别说明：

l 查看当前有哪些版本：nvm ls-remote （Window版本可能无此命令）

l 安装当前最新稳定版本: nvm install stable 或 nvm install stable 32

l 查看已安装的版本：nvm ls

l 切换Node版本: nvm use <版本>

验证及查看当前安装的node及npm版本:

node -v
​
npm -v

安装淘宝镜像(可选)

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装成功后使用cnpm命令代替npm

Git本地环境配置

下载安装Git

in64: https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-64-bit.exe

Win32: https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-32-bit.exe

Git全局配置

git config –global user.name “<姓名>”
​
git config –global user.email “<公司邮箱>”

配置本地仓库

git clone <组名>/<项目名>.git
​
cd <项目名>

Vue开发环境

前提条件

已正确安装NodeJS开发环境。

已正确安装Git开发环境。

安装Vue脚手架

npm install -g @vue/cli

验证安装：vue -V

Vue项目创建、运行、编译打包（创建vue项目才走该步骤，创建nui-app项目跳过该步骤）

新建项目

vue create <项目名> 或vue ui (图形接口创建项目)

下载依赖

cd <项目名>(进入项目根目录)
​
npm install （下载依赖）

运行项目

cnpm run serve

编译打包

npm run build

创建uni-app项目

创建项目vue

create -p dcloudio/uni-preset-vue my-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板

提示：通过该命令创建项目前提是全局安装了vue-cli

进入目录并运行

cd my-project
npm run serve

运行成功后，控制台会输出H5网站访问地址