安裝

1、全局安裝 vue-cli 腳手架（不建議用 5.0 版本，避免報錯）

 npm install -g @vue/cli@4.5.19

2、腳手架創(chuàng)建項目

vue create -p dcloudio/uni-preset-vue my-project

3、選擇 默認模板 即可

4、編譯并啟動項目

npm run dev:mp-weixin

?5、開發(fā)者工具，導(dǎo)入項目，注意路徑 "項目地址/dist/dev/mp-weixin"

開發(fā)的規(guī)范

1. 不能直接在開發(fā)者工具中修改代碼，口訣：vscode做開發(fā)，開發(fā)者工具做調(diào)試

2. 標簽使用小程序的規(guī)范，語法使用vue的即可

項目目錄結(jié)構(gòu)

1. App.vue 相等于原生小程序 app.wxss （全局樣式文件）和 app.js （應(yīng)用入口文件）

2. main.js uniapp 項目入口文件 ，后期有一些設(shè)置想全局都生效(vuex)

3. mainifest.json 相當于小程序 project.config.json 設(shè)置 appid 、設(shè)置不校驗合法域名一微信開發(fā)者工具一本地設(shè)置的功能

4. pages.json 相當于以前小程序當中全局配置 app.json 和頁面配置 index.json

   1. 新建了頁面，需要在 pages.json 中設(shè)置頁面路徑

   2. 設(shè)置應(yīng)用的標題還可以設(shè)置單個頁面的標題

   3. 設(shè)置導(dǎo)航欄樣式

   4. 設(shè)置 tabbar

5. uni.scss 全局樣式文件，寫 scss 語法，默認被 uniapp 引入了，所以不需要手動去引入它

6. pages 文件夾是否 uniapp 頁面文件！！

7. static 存放靜態(tài)資源，圖片，字體等

uniapp生命周期

口訣：組件生命周期使用vue規(guī)范，其他使用小程序規(guī)范

1. 應(yīng)用生命周期，使用小程序

   1. onLauch等

2. 頁面生命周期，使用小程序

   1. onLoad，onShow等

3. 組件生命周期，使用vue的規(guī)范

   1. created，mounted等

uniapp的api

1、wx的api，修改前綴后(uni)，可以直接用 : wx.showToast() ---- uni.showToast()

2、uni支持promise的使用方式

3、使用promise返回的是數(shù)組，建議直接解構(gòu)使用即可

easycom

1. 按照規(guī)范新建組件： components/組件名/組件名.vue

2. 頁面直接使用即可

?

引入和使用 uni-ui

1. 在根目錄創(chuàng)建 vue.config.js 文件 ，增加 @dcloudio/uni-ui 包的編譯

   module.exports = {
    ? ?transpileDependencies:['@dcloudio/uni-ui']
   }

2. 安裝 sass 和 uni-ui

   npm i sass @dcloudio/uni-ui

3. 配置 easycom

   // pages.json
   {
       "easycom": {
           "autoscan": true,
           "custom": {
               // uni-ui 規(guī)則如下配置
               "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
           }
       },
       
       // 原有內(nèi)容
       pages:[ ... ]
   }

4. 重新運行 編譯打包

   npm run dev:mp-weixin

?文章來源地址http://www.zghlxwxcb.cn/news/detail-491421.html

?

?

?

到了這里，關(guān)于vue-cli 腳手架創(chuàng)建uniapp項目（微信小程序）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！