步骤一：vite
1、创建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、引入函数组件的样式
“Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法解析自动注册组件，导致 @vant/auto-import-resolver 无法解析样式，因此需要手动引入样式。”——引自vant官网
在主入口文件（本文对应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 样式
// 创建 Vue 应用实例
const app = createApp(App);
// 注册 Vant 组件
app.use(Toast);
app.use(Dialog);
app.use(Notify);
app.use(ImagePreview);
app.mount('#app')
步骤四：eslint
为了方便地进行代码格式修复、报错提醒、规范化，这里继续安装和配置eslint
1、安装插件
yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验
@typescript-eslint/parser：解析器，让ESLint拥有规范TypeScript代码的能力
@typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint规则
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 项目风格
√ 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中可以定义自定义的规则。详细可以参考eslint文档https://eslint.org/docs/latest/rules/
步骤五：自动导入
当编写项目时，频繁用到的api和组件入ref、reactive等，每次都需要import，不太便利，为此我们配置自动导入
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下创建router文件夹并在其中创建index.ts文件作为路由主文件
内容如下：
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 样式
// 创建 Vue 应用实例并使用router
const app = createApp(App).use(router)
// 注册 Vant 组件
app.use(Toast)
app.use(Dialog)
app.use(Notify)
app.use(ImagePreview)
app.mount('#app')
2、搭建移动端页面框架（这部分可以根据项目需要自行定义）
在src下创建layouts文件夹，并创建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">
设置
</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（对应于以上router中定义的helloPage路由）
在src下建立views文件夹，并建立HelloPage.vue
<template>
Hello Page
</template>
最终效果：
基于此，可以在views文件夹中开发项目所需要的页面，并在router文件中定义相应的页面路由。
以上。感谢阅读。
因个人技术水平较低，文中内容可能有错误，如有发现请指出，避免误导更多人。
