步驟一：vite
1逃默、創(chuàng)建vite項目（本文全部使用yarn）
yarn create vite
2鹃愤、按照提示輸入項目名稱、框架名稱以及語言類型（本文使用vue3+TypeScript）
步驟二：vant
1完域、安裝vant （最新）
yarn add vant
2软吐、進入項目文件夾，并啟動項目
cd game-pm-mobile-front-end
npm run dev
步驟三：引入組件
完成以上安裝后筒主，為了方便在項目中使用組件关噪，需要配置引入
基于vite配置方便的按需引入
1、安裝插件
yarn add @vant/auto-import-resolver unplugin-vue-components -D
2乌妙、配置插件（vite.config.ts）
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};
3使兔、引入函數(shù)組件的樣式
“Vant 中有個別組件是以函數(shù)的形式提供的，包括 Toast藤韵，Dialog虐沥，Notify 和 ImagePreview 組件。在使用函數(shù)組件時泽艘，unplugin-vue-components 無法解析自動注冊組件欲险，導(dǎo)致 @vant/auto-import-resolver 無法解析樣式，因此需要手動引入樣式匹涮√焓裕”——引自vant官網(wǎng)
在主入口文件（本文對應(yīng)main.ts）配置：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 Vant 組件
import { Toast, Dialog, Notify, ImagePreview } from 'vant';
import 'vant/lib/index.css'; // 引入 Vant 樣式
// 創(chuàng)建 Vue 應(yīng)用實例
const app = createApp(App);
// 注冊 Vant 組件
app.use(Toast);
app.use(Dialog);
app.use(Notify);
app.use(ImagePreview);
app.mount('#app')
步驟四：eslint
為了方便地進行代碼格式修復(fù)、報錯提醒然低、規(guī)范化喜每，這里繼續(xù)安裝和配置eslint
1、安裝插件
yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
eslint-plugin-vue：僅支持vue雳攘，提供的規(guī)則可以支持 .vue\js\jsx\ts\tsx 文件校驗
@typescript-eslint/parser：解析器带兜，讓ESLint擁有規(guī)范TypeScript代碼的能力
@typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint規(guī)則
2吨灭、初始化eslint
yarn eslint --init
√ How would you like to use ESLint? · style 你希望怎樣使用eslint
√ What type of modules does your project use? · esm 你的項目使用什么模塊
√ Which framework does your project use? · vue 項目框架
√ Does your project use TypeScript? · No / Yes 是否使用typescript
√ Where does your code run? · browser, node 代碼運行在哪
√ How would you like to define a style for your project? · guide 項目樣式
√ Which style guide do you want to follow? · standard-with-typescript 項目風(fēng)格
√ What format do you want your config file to be in? · JavaScript 配置文件格式
√ Would you like to install them now? · No / Yes 確認是否安裝
√ Which package manager do you want to use? · yarn 安裝方式
3刚照、配置eslint
在生成的.eslintrc.cjs文件中配置一下信息：
module.exports = {
root: true,
env: {
node: true,
'vue/setup-compiler-macros': true
},
extends: [
'plugin:vue/vue3-recommended',
'standard',
'eslint:recommended'
],
parser: 'vue-eslint-parser',
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
},
globals: {
ref: true,
reactive: true,
computed: true,
nextTick: true,
onBeforeUnmount: true,
provide: true,
inject: true,
useRoute: true,
watch: true,
toRaw: true
}
}
其中，rules中可以定義自定義的規(guī)則喧兄。詳細可以參考eslint文檔https://eslint.org/docs/latest/rules/
步驟五：自動導(dǎo)入
當編寫項目時无畔，頻繁用到的api和組件入ref啊楚、reactive等，每次都需要import檩互，不太便利特幔，為此我們配置自動導(dǎo)入
1、安裝插件
yarn add unplugin-auto-import --dev
2闸昨、配置vite.config.ts
加入一下配置：
import AutoImport from 'unplugin-auto-import/vite'
// plugins中加入：
AutoImport({
imports: [
'vue',
'vue-router',
'vue-i18n'
],
dts: 'src/auto-imports.d.ts'
})
完成后的vite.config.ts文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()]
}),
AutoImport({
imports: [
'vue',
'vue-router',
'vue-i18n'
],
dts: 'src/auto-imports.d.ts'
})
],
resolve: {
alias: {
'@': '/src'
}
}
})
我們看到以上配置中蚯斯，自動引入的有vue、vue-route饵较、vue-i18n以及src/auto-imports.d.ts拍嵌。
之后我們寫代碼時，一些基本api和組件就不用手動import了循诉。
步驟六：配置基本頁面框架和路由vue-router
1横辆、安裝和引入vue-router
yarn add vue-router
在src下創(chuàng)建router文件夾并在其中創(chuàng)建index.ts文件作為路由主文件
內(nèi)容如下：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
redirect: '/hello'
},
{
path: '/hello',
name: 'helloPage',
component: () => import('@/views/HelloPage.vue')
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router
在項目主入口文件main.ts進行引入和使用
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入router文件
import router from './router'
// 引入 Vant 組件
import { Toast, Dialog, Notify, ImagePreview } from 'vant'
import 'vant/lib/index.css' // 引入 Vant 樣式
// 創(chuàng)建 Vue 應(yīng)用實例并使用router
const app = createApp(App).use(router)
// 注冊 Vant 組件
app.use(Toast)
app.use(Dialog)
app.use(Notify)
app.use(ImagePreview)
app.mount('#app')
2、搭建移動端頁面框架（這部分可以根據(jù)項目需要自行定義）
在src下創(chuàng)建layouts文件夾茄猫，并創(chuàng)建TheGlobalLayouts.vue狈蚤、TheGlobalBody.vue、TheGlobalFooter.vue
TheGlobalLayouts.vue
<template>
<TheGlobalBody />
<TheGlobalFooter />
</template>
<script setup lang="ts">
import TheGlobalBody from '@/layouts/TheGlobalBody.vue'
import TheGlobalFooter from '@/layouts/TheGlobalFooter.vue'
</script>
TheGlobalBody.vue
<template>
<div class="global-body">
<router-view />
</div>
</template>
<style scoped lang="less">
.global-body {
margin-bottom: @layout-footer-height;
}
</style>
TheGlobalFooter.vue
<template>
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">
首頁
</van-tabbar-item>
<van-tabbar-item icon="search">
待辦
</van-tabbar-item>
<van-tabbar-item icon="friends-o">
我的
</van-tabbar-item>
<van-tabbar-item icon="setting-o">
設(shè)置
</van-tabbar-item>
</van-tabbar>
</template>
<script setup lang="ts">
const active = ref(0)
</script>
3划纽、在主頁面文件app.vue中引入以上文件
<template>
<van-config-provider>
<TheGlobalLayouts />
</van-config-provider>
</template>
<script setup lang="ts">
import TheGlobalLayouts from '@/layouts/TheGlobalLayouts.vue'
</script>
<style scoped>
</style>
4脆侮、第一個頁面：helloPage（對應(yīng)于以上router中定義的helloPage路由）
在src下建立views文件夾，并建立HelloPage.vue
<template>
Hello Page
</template>
最終效果：
基于此勇劣，可以在views文件夾中開發(fā)項目所需要的頁面靖避，并在router文件中定義相應(yīng)的頁面路由。
以上比默。感謝閱讀幻捏。
因個人技術(shù)水平較低，文中內(nèi)容可能有錯誤命咐，如有發(fā)現(xiàn)請指出篡九，避免誤導(dǎo)更多人。
