Sublime 3 搭建APP开发环境
2020-02-10
APP开发可以用JAVA、Objective-C做原生开发，也可以编写WEB页面打包为APP。Sublime Text 3作为一款轻量化的代码编辑器，结合目前国内比较流行的APP低代码开发平台APICloud，来进行APP开发。下面就搭建环境做详细说明，系统及程序包括：Win7+laravel5.4+mysql（建议5.7）+php（7+）+bootstrap+require.js+axios+vuejs
一、Sublime下载、注册、安装、使用
Sublime是一款跨平台的编辑器，同时支持Windows、Linux、Mac等操作系统，具备拼写检查、Goto 功能，及丰富的扩展插件。目前最新版本是Sublime Text 3，下载后需购买注册码，如使用附录中提供的Sublime Text 注册码，可能会提示（LICENES UPGRADE REQUIRED）。
Sublime体积小并有丰富的插件（效果演示）和快捷键（常用快捷键）可用。使用插件需安装Package Control，这是管理插件的插件，安装后在Sublime中按下快捷键 Ctrl+Shift+P，在对话框中输入install，回车后即可调出安装对话框，输入插件名称，选中回车即可安装。常用插件包括：
Emmet ：前端代码自动补全
EditorConfig：代码风格管理，在团队协作时，可保证编码格式的统一
DocBlockr：生成代码注释
SublimeLinter：代码检查，可高亮提示代码中不规范、错误的写法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种语言
Local History：本地历史记录
SideBarEnhancements：更丰富的左侧面板右键菜单
Laravel 5 Snippets：laravel代码片段，类、方法、模版、命名空间自动补全
Laravel 5 Artisan：Artisan 命令行调用
Laravel Blade Highlighter：Laravel blade模板高亮
Laravel Blade AutoComplete：自动识别blade父级模板内容
Bootstrap 3 Snippets：前端UI库bootstrap 3 代码片段
Bootstrap 3 Autocomplete：前端UI库bootstrap 3 代码提示、自动完成
APICloudWiFiDebugView：APICloud的WiFi日志输出
SqlBeautifier：格式化sql语句
SQLTools：连接数据库
APICloud调试时可使用控制台输出，先安装APICloudWiFiDebugView插件（注意:由于APICloudWiFiDebugView部分功能依赖于APICloudWiFiSync插件，所以最好将APICloudWiFiSync插件也更新到最新版本。 安装插件后，需重启Sublime和WiFi真机同步服务），快捷键[ctrl]+[alt]+[w]启动后，在代码中加入console.log(object)即可查看相应对象。
代码调试需要使用安卓提供的adb工具（Android Debug Bridge） ，使电脑可以与模拟器或真实手机设备交互。Sublime安装APICloudLoader插件后，在Sublime Text 3\data\Packages\APICloudLoader\tools目录下会出现adb.exe命令行工具，在系统路径中加入此目录，即可在命令行窗口执行adb命令。
Sublime开发项目基本都需要数据库，如何访问MySQL，有多款工具可用：Mac下可用Sequel Pro，Windows下有免费的HeidiSQL（开源有中文版）、MySQL Workbench（MySQL官方出品），收费的Navicat，Web方式的phpMyAdmin（需要php环境）。
二、Laravel
Laravel是一套简洁的PHP Web开发框架，可以让代码逻辑更清晰。官网、中文社区、文档
Artisan是Laravel的命令行接口，有众多实用命令用于开发 Laravel 应用，在Sublime中使用Artisan需打开命令行窗口（ctrl+shift+t）。比如创建数据表，先创建migration文件，然后在命令行中执行“php artisan migrate”，即可创建。如果命令不能执行，有可能是PHP路径没有设置，需在系统属性->环境变量中添加PHP路径，比如D:\wamp\bin\php\php7.2.14
语言包安装：Laravel默认语言包为英文，如需将提示语言改为中文，则需安装中文语言包，具体方法是在命令行中输入“composer require caouecs/laravel-lang:~3.0”，执行后vendor目录下增加了名称为caouecs的语言包目录，拷贝“blog/vendor/caouecs/laravel-lang/src/zh-CN”目录到“blog/resources/lang”，打开文件“blog/config/app.php”，将“'locale' => 'en'”修改为“'locale' => 'zh-CN'”即可。
项目所依赖的PHP代码库通过Composer进行管理，安装好后需设置国内镜像，“composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/”，每个项目都可以通过“composer install”命令下载安装所依赖的代码库，相关代码会保存在项目根目录下的vender目录中。
三、Vue.js
Vue是一套用于构建用户界面的视图层框架。官网
为使用Vue.js，需安装以下程序：
* npm：这是基于Node.js的包管理器，从http://nodejs.cn/download/下载安装包执行，安装完成后在命令行窗口中执行npm -v，能返回版本号即表示安装成功
* cnpm：因网络原因，最好使用国内镜像安装，安装淘宝镜像需执行以下命令npm install -g cnpm --registry=https://registry.npm.taobao.org；如果要用npm i安装依赖，可执行此设置命令npm config set registry https://registry.npm.taobao.org
* vue-cli：这是Vuejs官方提供的命令行工具，安装命令 cnpm install --global vue-cli
* webpack：JS的打包器，安装命令 cnpm install -g webpack
* 在webapp目录下安装模板：安装命令 vue init webpack webapp，安装中仅路由器安装install vue-router选择Y，其他均选no
* 进入webapp目录：cd webapp
* 根据package.json安装node_modules：安装命令 cnpm install hdjs
* 启动开发模式：命令npm run dev，执行后会返回应用访问地址，比如 http://localhost:8080
* Vue文件在Sublime中默认没有高亮提示，也不能使用快捷键“Ctrl + Shift + /”做代码注释，需要安装插件“vue-syntax-highlight”
Vue安装后，需使用插件对后台进行ajax请求，安装方法及设置见vue-axios介绍
附录：
视频教程《Sublime Text开发工具》
视频教程《Laravel小学篇 - 简博客 》
视频教程《基于laravel和vuejs的webAPP实战开发 》源码
开发工具：mac+phpstorm+sequelPro（数据库管理软件， WIN下可用navicat）
程序语言：laravel5.4+mysql（建议5.7）+php（7+）+bootstrap+require.js+axios+vuejs
Sublime Text 3 注册码
----- BEGIN LICENSE -----
Member J2TeaM
Single User License
EA7E-1011316
D7DA350E 1B8B0760 972F8B60 F3E64036
B9B4E234 F356F38F 0AD1E3B7 0E9C5FAD
FA0A2ABE 25F65BD8 D51458E5 3923CE80
87428428 79079A01 AA69F319 A1AF29A4
A684C2DC 0B1583D4 19CBD290 217618CD
5653E0A0 BACE3948 BB2EE45E 422D2C87
DD9AF44B 99C49590 D2DBDEE1 75860FD2
8C8BB2AD B2ECE5A4 EFC08AF2 25A9B864
------ END LICENSE ------
Sublime Text 2 注册码
—– BEGIN LICENSE —–
Die Socialisten GmbH
10 User License
EA7E-800613
51311422 E45F49ED 3F0ADE0C E5B8A508
2F4D9B65 64E1E244 EDA11F0E F9D06110
B7B2E826 E6FDAA72 2C653693 5D80582F
09DCFFB5 113A940C 5045C0CD 5F8332F8
34356CC6 D96F6FDB 4DEC20EA 0A24D83A
2C82C329 E3290B29 A16109A7 EC198EB9
F28EBB17 9C07403F D44BA75A C23C6874
EBF11238 5546C3DD 737DC616 445C2941
—— END LICENSE ——