From 1f3828268e8446034eab87dd1990a31e5785706a Mon Sep 17 00:00:00 2001 From: wanganxp Date: Thu, 8 Aug 2019 18:51:02 +0800 Subject: [PATCH] Update quickstart.md --- docs/quickstart.md | 98 +++++++++++++++++++++++----------------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/docs/quickstart.md b/docs/quickstart.md index c38e8e58f..1d81add78 100644 --- a/docs/quickstart.md +++ b/docs/quickstart.md @@ -1,22 +1,22 @@ - -> `uni-app`支持通过 可视化界面、[`vue-cli`命令行](https://uniapp.dcloud.io/quickstart?id=%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c) 两种方式快速创建项目。 - - -## 1. 通过 HBuilderX 可视化界面 - -可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。 - + +> `uni-app`支持通过 可视化界面、[`vue-cli`命令行](https://uniapp.dcloud.io/quickstart?id=%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c) 两种方式快速创建项目。 + + +## 1. 通过 HBuilderX 可视化界面 + +可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。 + 开始之前，开发者需先下载安装如下工具： - + - HBuilderX：[官方IDE下载地址](http://www.dcloud.io/hbuilderx.html) HBuilderX是通用的前端开发工具，但为`uni-app`做了特别强化。 下载App开发版，可开箱即用；如下载标准版，在运行或发行`uni-app`时，会提示安装`uni-app`插件，插件下载完成后方可使用。 -如使用`cli`方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。 - - +如使用`cli`方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。 + + ### 创建uni-app 在点击工具栏里的文件 -> 新建 -> 项目： @@ -117,13 +117,13 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行 #### 发布为H5 1. 在 ``manifest.json`` 的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 www.xxx.com/h5，如：[https://uniapp.dcloud.io/h5](https://uniapp.dcloud.io/h5)。 -
- +
+
2. 在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。 -
- +
+
**注意** @@ -131,18 +131,18 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行 - 打包部署后，在服务器上开启 gzip 可以进一步压缩文件。具体的配置，可以参考网上的分享：https://juejin.im/post/5af003286fb9a07aac24611b #### 发布为小程序 - -**发布为微信小程序：** -1. 申请微信小程序AppID，参考：[微信教程](https://developers.weixin.qq.com/miniprogram/dev/#申请帐号)。 -2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可在 ``unpackage/dist/build/mp-weixin`` 生成微信小程序项目代码。 + +**发布为微信小程序：** +1. 申请微信小程序AppID，参考：[微信教程](https://developers.weixin.qq.com/miniprogram/dev/#申请帐号)。 +2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可在 ``unpackage/dist/build/mp-weixin`` 生成微信小程序项目代码。
3. 在微信开小程序发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：[微信官方教程](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/release.html)。 **发布为百度小程序：** -1. 入驻小程序并申请百度小程序AppID，参考：[百度小程序教程](https://smartprogram.baidu.com/docs/introduction/enter_application/)。 -2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-百度"，输入小程序名称和appid点击发行即可在 ``/unpackage/dist/build/mp-baidu`` 生成百度小程序项目代码。 +1. 入驻小程序并申请百度小程序AppID，参考：[百度小程序教程](https://smartprogram.baidu.com/docs/introduction/enter_application/)。 +2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-百度"，输入小程序名称和appid点击发行即可在 ``/unpackage/dist/build/mp-baidu`` 生成百度小程序项目代码。
@@ -150,8 +150,8 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行 **发布为支付宝小程序：** -1. 入驻支付宝小程序，参考：[支付宝小程序教程](https://docs.alipay.com/mini/introduce)。 -2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-支付宝"，即可在 ``/unpackage/dist/build/mp-alipay`` 生成支付宝小程序项目代码。 +1. 入驻支付宝小程序，参考：[支付宝小程序教程](https://docs.alipay.com/mini/introduce)。 +2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-支付宝"，即可在 ``/unpackage/dist/build/mp-alipay`` 生成支付宝小程序项目代码。
@@ -159,8 +159,8 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行 **发布为头条小程序：** -1. 入驻头条小程序，参考：[头条小程序教程](https://developer.toutiao.com/docs/intro/create.html)。 -2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-字节跳动"，即可在 ``/unpackage/dist/build/mp-alipay`` 生成头条小程序项目代码。 +1. 入驻头条小程序，参考：[头条小程序教程](https://developer.toutiao.com/docs/intro/create.html)。 +2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-字节跳动"，即可在 ``/unpackage/dist/build/mp-alipay`` 生成头条小程序项目代码。
@@ -168,39 +168,39 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行 发布的快捷键是`Ctrl+u`。同样可拉下快速发布菜单并按数字键选择。 -## 2. 通过vue-cli命令行 - -除了可视化界面，也可以使用 `cli` 脚手架，可以通过 `vue-cli` 创建 `uni-app` 项目。 +## 2. 通过vue-cli命令行 + +除了HBuilderX可视化界面，也可以使用 `cli` 脚手架，可以通过 `vue-cli` 创建 `uni-app` 项目。 **注意：** - vue-cli 版本必须是3.x -- `cli` 版本更新快于HBuilderX正式版。HBuilderX正式版所包含的uni-app编译器一般是在`cli`版发布一段时间并稳定后才会更新到HBuilderX正式版。`cli`版适合喜欢鼓捣的尝鲜者，其好处是可以及时获取新功能，坏处是稳定性不如HBuilderX正式版，但因为开源，所以也欢迎开发者一起完善。 +- `cli` 版本更新快于HBuilderX正式版。HBuilderX正式版所包含的uni-app编译器一般是在`cli`版发布一段时间并稳定后才会更新到HBuilderX正式版。 ### 环境安装 - + 全局安装vue-cli - -``` -npm install -g @vue/cli -``` + +``` +npm install -g @vue/cli +``` ### 创建uni-app - -``` -vue create -p dcloudio/uni-preset-vue my-project -``` -此时，会提示选择项目模板，初次体验建议选择 `hello uni-app` 项目模板，如下所示： - -
- -
+ +``` +vue create -p dcloudio/uni-preset-vue my-project +``` +此时，会提示选择项目模板，初次体验建议选择 `hello uni-app` 项目模板，如下所示： + +
+ +
#### 自定义模板 选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 `userName/repositoryName`，如 `dcloudio/uni-template-picture` 就是下载图片模板。 更多支持的下载方式，请参考这个插件的说明：[download-git-repo](https://github.com/flipxfx/download-git-repo) -### 运行并发布uni-app +### 运行并发布uni-app ``` npm run dev:%PLATFORM% @@ -234,12 +234,12 @@ npm run build:%PLATFORM% * ``cli``创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行``npm update``。 * HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。 * 已经使用``cli``创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。 -* ``cli``可以自定义webpack，有灵活度但增加了出错的概率。如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。 +* ``cli``版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。 #### 开发工具的区别 -* ``cli``创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode等支持d.ts的开发工具里正常开发并有语法提示。 -* 但其他开发工具比起HBuilderX，开发效率仍有不足。详见：[https://ask.dcloud.net.cn/article/35451](https://ask.dcloud.net.cn/article/35451) -* ``cli``创建的项目，发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。 +* ``cli``创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode、webstorm等支持d.ts的开发工具里正常开发并有语法提示。注意使用HBuilderX创建的项目不带d.ts，拖到其他工具里不会有代码提示。 +* 但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：[https://ask.dcloud.net.cn/article/35451](https://ask.dcloud.net.cn/article/35451) +* 发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。 * 如果使用``cli``创建项目，那下载HBuilderX时只需下载10M的标准版即可。因为编译器已经安装到项目下了。 * 对 `cli` 使用有疑问，欢迎扫码加入 uni-app 微信交流群讨论：
-- GitLab