uni-app創建項目及使用 vant-weapp

創建項目

一、 使用 DCloud 公司提供的 HBuilderX 來創建項目

• https://uniapp.dcloud.io/quickstart-hx

二、 使用腳手架搭建項目 ( 以微信小程序為例 )

• 全局安裝 npm install -g @vue/cli

• 創建項目 vue create -p dcloudio/uni-preset-vue my-project

  • 選擇模板(這里選擇了默認模板)：
    
  • 創建成功
    

• 啟動項目(微信小程序) npm run dev:mp-weixin，上一步中創建成功的提示中 npm run serve 運行的是h5，因為 uni-app 可以做不同的小程序，所以會有很多的運行和打包命令，具體的可以看項目的 package.json 文件。

• 運行成功后，將dist文件夾中dev文件下生成的對應的文件(mp-weixin)導入到微信開發者工具中

安裝使用 scss 預編譯語言 (可選，也可以使用less)

• 安裝 npm install sass-loader node-sass
• 使用 <style lang='scss'></style>

項目目錄

node_modules               --> 項目的依賴
public                     
  |-- index.html           --> uni-app 開發網頁應用時的模板
src                        
  |-- pages                --> 項目的頁面組件
  |-- static               --> 項目的靜態資源
  |-- APP.vue              --> 應用配置，用來配置APP全局樣式以及監聽
  |-- main.js              --> Vue初始化入口文件
  |-- manifest.json        --> 配置應用名稱、appid、logo、版本等打包信息
  |-- pages.json           --> 配置頁面路由、導航條、選項卡等頁面類信息
  |-- uni.scss             --> 項目的scss全局變量
.gitignore
babel.config.js            --> 處理javascript版本問題(ES6-->ES5)
package-lock.json
package.json               --> 項目包的描述(運行/打包命令、所安裝的第三方依賴)
postcss.config.js          --> 定義如何編譯css代碼
README.md                  --> 項目的說明
tsconfig.json              --> 項目使用ts開發時的配置

使用 vant-weapp UI庫

一、 在跟目錄下創建wxcomponents(文件名不可更改)，在該目錄下新建 vant 文件夾

二、 下載並引入vant-weapp

• 下載地址：https://github.com/youzan/vant-weapp
• 將下載下來的 dist 文件夾中的內容復制到剛才新建的vant文件夾中

三、 在 App.vue 導入全局樣式

四、 在 pages.json 中引入對應的組件

• 在某個頁面中單獨使用
  

• 在全局使用