uni-app---项目的开发全流程（1、项目搭建）

        uni-app  是一个使用 vue 开发所有前端应用的框架，开发者编写一套到吗，可发布到ios，安卓、H5、以及各种小程序（微信、支付宝等等...）多个平台。

        官网：uni-app官网

两种搭建uni-app项目的方法

1. 通过 HBuilderX 可视化界面

        可视化的方式比较简单，HbuilderX内置相关环境，开箱即用，无需配置node.js

        开始之前，开发者需要先下载工具： HbuilderX  官方IDE下载地址

2. 通过vue-cli 命令行

        也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app项目

使用vue-cli创建uni-app项目

步骤：

1. 全局安装vue-cli脚手架版本4（如果已经安装，可以跳过， ）。npm install -g @vue/cli@4

        如果vue-cli的版本是5，会导致安装失败

# 查看版本, 注意-V是大写的
vue -V 
# 安装包
npm install -g @vue/cli@4

2. 执行cli ，用指定模板来创建项目

# vue create 是创建项目
# vue create -p dcloudio/uni-preset-vue 是根据指定的模板dcloudio/uni-preset-vue 来创建
# name 是项目名称
vue create -p dcloudio/uni-preset-vue name

3. 选择默认模版

 注意：因为网速原因，下载可能会失败；关掉重新执行即可

4. 运行项目

npm run dev:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-qq	qq 小程序

运行小程序

步骤

1. 执行小程序端开发命令

npm run dev:mp-weixin

说明：运行成功之后，会自动在项目根目录下，生成小程序项目代码，如图：

 在dist/dev目录下会有一个mp-weixin的文件夹

 就是微信小程序的代码

2. 打开小程序开发者工具，导入上一步生成的小程序项目代码

        注意：填写自己的appid

3. 运行起来

 

Hbuilderx创建并运行uniapp项目

先创建

 再运行

hbuilderX会主动去打开微信开发者工具，并启动项目。

如果是第一次，需要设置微信开发者工具的安装地址。

 如果不能主动开启微信开发者工具，可以在微信开发者工具中设置下

然后重新尝试

这样一个uni-app项目就运行起来了