uni-app快速上手

一、什么是uni-app

uni-app 是一个使用 Vuejs 开发所有前端应用的框架。开发者编写一套代码，可发布到 iS、Android、H5、以及各种小程序(微信/支付宝百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

二、HBuilderX的下载和安装和配置

uni-app 官方推荐使用HBuilderX来开发uni-app类型的项目。主要好处：

• 模板丰富
• 完善的智能提示
• 一键运行

当然，你依然可以根据自的喜好，选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器!

2.1. 下载 HBuilderX

• 访问 HBuilderx的官网首页 https://www.dcloud.io/hbuilderx.html
• 点击首页的DOWNLOAD按钮
• 选择下载正式版 -> App 开发版

2.2. 安装 HBuilderX

• 将下载的 zip包进行解压缩
• 将解压之后的文件夹，存放到纯英文的目录中 (且不能包含括号等特殊字符）
• 双击 HBuilderx.exe 即可启动 HBuilderX
• 也可以选择HBuilderx.exe，右键创建快捷方式，把快捷方式剪切到桌面即可双击快速打开HBuilderx

2.3. HBuilderX安装 scss/sass 编译

为了方便编写样式(例如: <style lang="scss"></style> )，建议安装 scss/sass 编译插件。插件下载地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass

• 进入插件下载页面之后，点击右上角的 使用 HBuilder 导入插件 按进行自动安装，截图如下：
  

2.4. HBuilderX 快捷键方案切换

操作步骤: 工具->预设快捷键方案切换>VS Code

2.5. 修改编辑器的基本设置

操作步骤:工具->设置->打开settings.json 按需进行配置

{
	"editor.colorScheme": "Default",
	"editor.fontSize": 12,
	"editor.fontFamily": "Consolas",
	"editor.fontFmyCHS": "微软雅黑 Light",
	"editor.insertSpaces": true,
	"editor.lineHeight": "1.5",
	"editor.minimap.enabled": false,
	"editor.mouseWheelZoom": true,
	"editor.onlyHighlightWord": false,
	"editor.tabSize": 2,
	"editor.wordWrap": true,
	"editor.iconTheme": "vs-seti",
	"editor.codeassist.px2rem.enabel": false,
	"editor.codeassist.px2upx.enabel": false
}

三、uni-app 项目的目录结构

3.1. 新建uni-app 项目

• 文件->新建-> 项目
  

• 填写项基本信息
  

3.2. 目录结构