开发工具

  •  Visual Studio Code 微软开源的一款编辑器，推荐使用

下载地址：下载

  •  git 分布式版本控制系统，可以跟踪代码

下载地址：官网

入门教程：廖雪峰Git 教程

  •  Node.js  提供js 代码执行的环境

为什么需要node.js： 都知道js 代码 写在.html文件的<script>标签中 或者单独写在.js文件后在html中引入，最后在浏览器打开html 由浏览器执行js 代码，这时候 js 的运行环境是浏览器。安装 node.js 后，js 代码可以直接在node.js 环境中运行，不需要再通过浏览器。方便调试、运行 js 代码。简而言之：node 是个容器，可以跑js。

下载地址： node 官网

安装教程：安装教程

  •  npm  包管理器，安装node.js 后自动安装，不需要单独安装

查看是否安装： npm -v

为什么会有它：代码比喻成造轮子的过程，有些轮子是通用的，于是就有人造好了上传到npm上，大家都可以通过npm 下载使用，减少重复造轮子。

也可以使用yarn，yarn出现是为了解决npm 效率问题，但npm 从V5和V6版本以后，大大缩小了与yarn的性能差距。因此两者都可；注意：yarn V2版本不支持node_modules文件夹。

  •  GitHub  代码仓库，程序员的网站

Github 开源的圣地，里面有众多优秀的开源项目，是学习的好地方。可以把自己的代码分享到 Github，也可以在 GitHub 上记录自己的学习情况，一个经常维护的 Github 对面试有很大的帮助。同时可以在 GitHub 上学习别人的编程技巧。日常使用，日常学习。

官网：https://github.com/

使用教程：使用教程

  • 雀语： 阿里巴巴出品的一款在线文档，比较好用，可以当作自己的学习笔记。

VScode 常用插件

  • Chinese：中文简体插件，汉化 VScode
  • Auto CloseTag: html自动添加关闭标签
  • Auto Import ： TS 文件中自动导入关联文件
  • Auto Rename Tag：html中修改开始标签自动更改结束标签名，
  • Beautify：格式化美化工具
  • Code Runner：运行代码
  • Git History：查看git 提交的历史记录
  • GitLens：git 工具，可以查看git分支提交记录，在代码中显示提交历史
  • Image preview ：可以在代码中预览图片
  • Live Server ：启动一个服务，在浏览器实时预览HTML
  • Project Manager：项目管理插件，可以快速切换不同的项目
  • Todo Tree：代码中写 //TODO 的地方可以在此插件快速定位
  • vscode-icons：文件图标
  • ionic 2 Commands with Snippets：用于创建ionic项目文件，ionic项目推荐安装
  • Debugger for Chrome：直接在VSCode中调试代码，推荐

ionic 项目(angular)环境搭建

ionic简介：ionic是一套移动端UI框架，目前最新版本是5.6.10；原生中间层，支持Cordova和Capacitor；支持Angular、Vue、React框架。我们组项目使用的是ionic3-Cordova，用于开发移动端应用。

安装ionic开发依赖：

首先需要安装node.js，其次建议安装 vs code 插件：ionic 2 Commands with Snippets

  1. 全局安装ionic-cli
$ npm install -g @ionic/cli

Tip: ionic-cli 命令行界面更换过包名，如果装有老版本ionic cli 需要执行下一命令进行卸载后再安装

$ npm uninstall -g ionic
$ npm install -g @ionic/cli
  1. 安装cordova
$ npm i -g cordova
  1. 查看是否安装成功
$ ionic --version
$ cordova --version
  1. 创建 ionic-V3 版本项目
$ ionic start myApp tabs --type=ionic-angular

type 可选值：

ionic-angular ：构建ionic3项目

angular：构建基于angular的项目

react：构建基于react的项目

vue: 构建基于vue的项目，需要最新的 ionic-cli

cordova 构建原生应用（可选）

使用Cordova 打包代码生成移动端应用，需要安装iOS或Android开发环境。iOS需要macOS，受电脑限制暂不介绍，主要介绍 window 打包Android应用。

  1. 安装Java
  2. 安装Android sdk

可单独下载安装 Android sdk 或者直接下载 Android Studio开发工具会自动下载并安装Android sdk。因发布生产包需要签名，建议直接安装 Android Studio

  1. 在项目中添加原生平台 cordova-android
$ ionic cordova platform add android

执行上面命令后，会在项目中添加 platforms 文件夹，里面有 android 子文件夹，此 android 文件夹是一个完整的安卓项目，可以通过 Android Studio 打开运行。上面命令实际是安装了 cordova-android， 其最新版本为 V9。易维、匠心等项目使用的是 cordova-android@9.0.0 版本。

  1. 构建原生应用
$ ionic cordova build android --release --prod

--release: 构建生产包，不加此参数默认打debug包用于调试。

--prod: 开启压缩，打生产包加上

Vue 项目环境搭建

Vue技术栈在团队中主要用于开发H5应用，使用的版本为 vue@2.X。采用的技术栈为 vue + vuex + vue router + vant。其中vant 是有赞开源的移动端组件库，开始是用于微信小程序。

安装依赖，进入vue项目文件下，执行：

$ npm i
// or
$ yarn

React 项目环境

React技术栈在团队中主要用于开发 web 端项目。UI框架采用的是 阿里的 Ant Design。此技术栈是公司主推的技术，由技术委员会牵头，技术沉淀丰厚。基础项目是由 ant design pro 而来。

安装依赖，进入React项目文件下，执行：

$npm i
// OR
$ yarn