vue3 vant3初步搭建專案（一）

2021-10-13 19:54:31 字數 3023 閱讀 4004

vue3+vant3

準備vue3環境

可以安裝vue-clinpm install -g @vue/cli，通過腳手架來選擇構建vue3專案：選擇：

default


(vue 3 preview)


([vue 3


] babel, eslint)
也可以使用vite快速構建乙個vue3專案，具體步驟和其他內容官網上都有。

cd npm install

npm run dev

import


from


'vue'


.mount


()
安裝vant3

具體的其他說明官網上都有

npm i vant@next -


s
安裝完畢後我們先全域性引入來看一下效果，修改main.js為以下**：

import


from


'vue'


import vant from


'vant'


;import


'vant/lib/index.css';;


use(vant)


;mount


()
然後我們複製乙個vant按鈕到helloworld.vue中：按鈕，此時頁面上增加了乙個藍色按鈕。引入vant成功。

平常我們開發的時候用不了那麼多vant元件，所以需要配置一下按需引用。按照官網步驟來：

npm i babel-plugin-


import


-d
安裝完畢後我們在babel.config.js檔案下配置：

module.exports =


,'vant']]


}
修改main.js檔案：

import


from


'vue'


import


from


'@/config/vant.config.js'


;vant


mount


()
在src下新建config目錄 新建vant.config.js檔案，可以將需要使用到的vant元件在這裡引入：

import


from


'vant'


;export


function


vant
在helloworld.vue檔案中：

>


class


="hello"


>


>


}h1>


icon


="plus"


type


="primary"


>


按鈕van-button


>


v-model:loading


="state.loading"


:finished


="state.finished"


finished-text


="沒有更多了"


@load


="onload"


>


v-for


="item in state.list"


:key


="item"


:title


="item"


/>


van-list


>


div>


template


>


>


import


from


'vue'


;export


default


,setup()


);const


onload=(


)=>


// 載入狀態結束


state.loading =


false


;// 資料全部載入完成


if(state.list.length >=40)


},1000);


};return;}


,}script


>
已經可以看到vant的按鈕和列表的效果：

安裝vue-router

npm i vue-router@next
src目錄下新增router資料夾，新增index.js路由配置檔案，routes為路由詳細配置。

import


from


'vue-router'


import routes from


'./routes'


const router =


createrouter()


export


default router
安裝vuex
npm i vuex@next
src目錄下新增store資料夾index.js檔案。

import


from


'vuex'


export


default


createstore(,


mutations:


,  actions:


,  modules:


})
main.js裡引入 store和router：

import router from


'./router'


import store from


'./store'
安裝less-loader
npm i less less-loader -


d
至此我們初步的準備工作完成。

vue3 vant 移動端應用（1）

npm i vant s主要問題如何按需引用 rem適配 按需引入 babel plugin import 會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝命令 npm i babel plugin import d 複製 安裝之後新建立babel.config.js檔案 mod...

Vue3 x簡介 環境搭建 專案建立執行

一 環境搭建 建立執行專案 通過vue腳手架工具可以讓我們快捷的搭建vue專案，目前vue官方給我們提供了2個腳手架，vue cli和vite 1 通過vue cli建立我們的專案 推薦 1.1 安裝vue cli,同一臺電腦只需要安裝一次 yarn global add vue cli npm i...

Vue3學習日記 一 使用Vite搭建專案

vite 法語單詞 fast 發音為 vit 是由vue作者尤雨溪開發的一種新型的前端構建工具，可顯著改善前端開發體驗。vite 現在的版本是2.0 beta，它預設建立的就是vue3.0的專案，詳細大家可以去github或官網進行了解 為什麼要使用vite來搭建vue3專案呢？因為它很快 等下你就...