首頁 > web前端 > uni-app > 如何做一個uni-app專案?流程講解

如何做一個uni-app專案?流程講解

青灯夜游
發布: 2021-09-09 18:58:53
轉載
4565 人瀏覽過

如何做一個uni-app專案?這篇文章就來給大家系統的講解一下做一個uni-app的流程,希望對大家有幫助!

如何做一個uni-app專案?流程講解

做一個uni-app的流程:

包含大量目前前端必備的技能,如vue,微信小程序,組件封裝,行動裝置手勢封裝,資料分頁,axios,moment,flex佈局,sass,影片播放,影片下載等等功能。 【相關推薦:《uniapp教學》】

1. uni-app介紹

1.1 什麼是uni- app

uni-app 是使用vue.js語法開發所有前端應用的框架

可以開發各種東西

也叫全端發展架構

2. uni-app 基礎

#2.1 基礎問題

  • uni-app初體驗
  • 專案結構介紹
  • 樣式與sass
  • 基本語法
  • 事件
  • 元件
  • 生命週期

3. 先基礎,後專案

#需要的技術堆疊有

  • html
  • #css
  • JavaScript
  • vue
  • 微信小程式
  • uni-app
  • ##uni-ui
  • uni-api

moment.js手勢封裝

#4. 用鷹架搭建專案

##1、全域安裝

npm install -g @vue/cli
登入後複製

2、建立專案

vue create -p dcloudio/uni-preset-vue my-project
登入後複製

3、啟動專案(微信小程式)

npm run dev:mp-weixin
登入後複製

4、微信小程式開發者工具匯入專案 #記得要進入根目錄裡

4.1 專案目錄如何做一個uni-app專案?流程講解

    4.2 樣式和sass
  • 支援小程式的rpx和h5的vw、vh
內建有sass的配置了,只需要安裝對應的依賴即可「npm install sass-loader node-sass "

vue組件中,在style標籤上加入屬性「