uni-app是一個使用 Vue.js 開發跨平臺應用的前端框架，使用hbuilder X可以快速將一套代碼打包至最多7個平臺。對於個人開發者，或者創業公司來說就是開發神器，省去了很多開發成本。下面就給大家介紹一下怎麼快速上手uni-app。
uni-app使用的是vuejs的語法，所以會vuejs的朋友就可以跳過學習語法這一步了，還不會vuejs的朋友也不要緊，可以先去vue官方文檔看看，vue的文檔可以說非常通俗易懂了，如果你有遇到前端方面的問題或者需要一些前端學習資料可以加q羣：682783851。下面就假設大家都會vuejs了。
首先，我們已經知道uni-app是用來製作一個跨平臺應用的，所以，在開始之前，我們一定要知道uni-app是如何打包到多個平臺的，使用uni-app開發，我這裏是建議大家使用官方的開發者工具的，官方工具也非常好用，對於一些配置項非常方便，可以省去很多麻煩，使用開發者工具我們就知道了，uni-app跨平臺都是開發者工具來完成編譯的。
那麼對於多個平臺，是不是只需要看一端就行了呢？答案是否定的，uni-app對百分之90的樣式是完全跨平臺的，對於一些特殊的，因爲每個平臺要求不一樣，所以我們要使用條件編譯來做適配，另外對於一些第三方授權登錄或者支付功能每個平臺也有所不同。這裏我們注意要使用條件編譯，重要點是一定要注意每個平臺對組件或接口的兼容性。
另外，需要注意的是uni-app中對vue語法的兼容性，使用 Vue.js 注意事項
瞭解上面的兩點之後，我們就可以開始創建一個項目了，打開hbuilder X，左上角文件-新建-項目，可以選擇uni-app的模板學習一下，看看uni-app的目錄結構如何，下面是【購靚號】項目的目錄結構
下面目錄說明好好看一下
common 是存放公共js和css的目錄，大家可以把一些工具js或者公共的css放這裏面
components是放組件的目錄，我們所有的組件都可以放這裏面，記住組件裏面不能使用uni-app頁面鉤子函數
pages 是uni-app放頁面的文件夾，我們每次在這裏面新建一個頁面，hbuilder X都會在pages.json裏面配置好。
static 是存放字體或圖片的文件夾，一些靜態資源都可以放這裏面
store 是vuex狀態管理，因爲uni-app項目內置vuex所以直接在main.js裏面配置一下就可以使用了
subpages 是因爲內容過多，分的包，這裏面新建的頁面pages.json裏面不會自動生成對應配置項
subpagesA 也是分的包，因爲小程序限制，所以建議大家在一開始就考慮分包情況。免得後面又要整理
unpackage 裏面的打包後的東西，我們可以不用管，h5打包後會放在這個裏面的dist/build/h5裏面
App.vue 可以說是入口文件，我們公共的css可以放這裏面，應用啓動需要做的事情也可以放這裏面，但是這個裏面是不能進行頁面跳轉的
main.js 是入口js文件，跟vue腳手架一樣的，我們可以引入全局js，配置一些全局js函數等都可以在這裏操作
manifest.json是uni-app的配置項，一般都是可視化配置，很少用到源碼配置，大家基本看一看就知道了，不知道的加QQ羣私聊羣主：682783851
pages.json 就是頁面配置文件了，你寫的每一個頁面都要在這裏面配置，每個頁面一些的特殊配置項也是在這裏面寫，uni-app pages配置項
uni.scss 是uni-app的樣式包，大家隨意放
這個時候我們就可以開始開發頁面了，直接在pages文件夾上右鍵就可以新建頁面了，每一個頁面都是vue文件，結構跟我們使用vue腳手架一樣，寫起來還是很舒服呀！
上面是一個大概的講述，具體的學習路線還是要依賴官方文檔，大家可以根據下面流程學習
一定要注意每個組件和接口在平臺的支持情況。
官方文檔非常詳細，我們無需依賴其他書籍，有問題可以加QQ羣，裏面有很多學習資料，也可以提資源需求，還可以私聊羣主解決問題，羣主就是我，哈哈哈。
另外，想看看uni-app做出來的跨平臺應用是什麼體驗的小夥伴，可以看下面了，體驗一下中大型項目的感覺，包含登錄支付功能，還可以分享。
下面是【購靚號】平臺的跨平臺應用，PC端可訪問購靚號 或複製打開鏈接https://www.golianghao.com。手機端可掃碼體驗
