文章僅供初學入門，只講學習套路，如何去學習，具體知識點不具體敘述。
h5開發即無線端的web開發
學習h5開發，整體瞭解一下各種技術與工具：
| 常用開發框架 | 排名前三框架：react.js 、vue.js、Angular |
| 常用ui框架 | mui、mint-ui等等 |
| node.js | Javascript運行環境，意思就是你開發的h5項目需要的運行環境 |
| npm | 通常稱爲node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發佈等。（外網） |
| cnpm | npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，cnpm淘寶乾的，就是講可以從國內下載。 |
| 常用開發工具 | vs code、HBuilder、webstorm 、sublime、、、、、 |
一、基礎知識學習
1.1 h5開發需要用到 html、css、javaScript三門語言。
前端頁面：html+css
邏輯處理：javaScript
推薦幾門語言學習的博客
HTML學習：
http://www.runoob.com/html/html5-intro.html
https://www.w3cschool.cn/html5/g5nfhflc.html
css學習：
http://www.runoob.com/css/css-tutorial.html
JavaScript學習：
http://www.runoob.com/js/js-tutorial.html
https://www.w3cschool.cn/javascript/
w3cschool、菜鳥教程這些都是很可以的。
這部分內容學個三五天就差不多了，有個概念，在項目中邊學邊用。
1.2 開發框架學習
本文基於vue開發，需要學習vue知識
主要學習vue.js 、路由router
Vue.js 教程：https://www.runoob.com/vue2/vue-install.html
Vue API：https://cn.vuejs.org/v2/api/#component
相關知識百度很多學習資料
二、開發工具及環境搭建（vs+vue.js）
基礎學完之後，還是一臉懵逼。一個h5項目如何開啓呢？直接上步驟。
2.1 環境搭建
2.1.1 Node.js 安裝（自行百度學習Node.js）
安裝配置：https://www.runoob.com/nodejs/nodejs-install-setup.html
npm: Nodejs下的包管理器。安裝了Node.js後，在Node的安裝目錄下可找到。
2.1.2 cnpm安裝
自行百度
2.1.3 vs code安裝
自行下載安裝，安裝vs code 最好安裝好所需要的大部分插件，方便開發。
三、使用vue.js來個小demo
3.1：新建項目如：mydemo
Vue.js教程新建項目如下操作：
注意：如果安裝教程的走，會建在默認目錄下：C:\Users\dell，如果想要建在自己想要的目錄，cmd先進入到你的目錄，如這裏案例：E:\h5\project
cmd操作如下：
新建項目，按着步驟操作即可：
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 這裏需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
按步驟以及創建了一個vue項目，這就是一個簡短的vue項目啓動
四、打包
在工程目錄打開命令窗，
cnpm run build 命令進行打包
在目錄下會生成dist文件夾，打好的部署包就在裏邊
五、項目部署
部署包可以部署在tomcat或nginx下，具體步驟很簡單，自行百度。