天天看點

使用wepy架構,建立小程式項目

附:官網快速開始連結(點我直接跳轉)

打開指令行

一.全局安裝wepy

npm install @wepy/cli -g
           

檢視安裝成功

wepy --help
           
使用wepy架構,建立小程式項目

說明全局安裝成功

二.建立項目

1.執行指令(wepy_test是項目名稱,可随意填寫)

wepy init standard wepy_test
           
使用wepy架構,建立小程式項目

建立成功

使用wepy架構,建立小程式項目

2.進入項目

項目目錄

使用wepy架構,建立小程式項目

安裝依賴

cnpm install
           

安裝成功之後就可以使用

npm run dev
           

啟動并編譯項目了

三.檢視項目

使用開發者工具導入建立項目的根目錄,即可預覽效果。

使用wepy架構,建立小程式項目
使用wepy架構,建立小程式項目

項目目錄結構

使用wepy架構,建立小程式項目

學過vue的都明白這個目錄結構跟vue-cli是一樣的

新增成功

四.引入vant元件

附:vant官網請點這裡

執行指令

cnpm i @vant/weapp -S --production
           
使用wepy架構,建立小程式項目

将node_modules下的vant_weapp中的dist檔案夾考入components檔案夾中

使用wepy架構,建立小程式項目
使用wepy架構,建立小程式項目
usingComponents: {
  'van-button': '../components/vant/button/index'
}
           

随便引入一個元件試試,是否成功

使用wepy架構,建立小程式項目

成功顯示,引入成功

繼續閱讀