移动端h5工程搭建

项目搭建套餐：

1）vite作为工程脚手架

2）vue3作为项目框架

3）使用Typescript作为语言检测工具

4）使用pnpm包依赖管理工具

5）vue-router作为项目页面路由导航工具

6）使用sass作为项目的样式预处理语言

7）使用postcss作为CSS辅助工具

8）使用eslint作为代码语法检测工具

9）配置prettier及husky添加git提交hook

10）vuex作为项目状态管理工具

11）使用vuex-persistedstate作为持久化存储工具

12）使用auto-import插件辅助支持代码编写

懒人直接clone工程地址：vite-ts: 前端工程模板

1、cd工程目录，执行npm init vite@latest初始化vite工程

2、根据提示填写项目名称，选择Vue作为项目框架

3、选择Typescript作为语言工具

此时工作空间多出了一个vite-ts的工程，接下来使用pnpm安装工程依赖（pnpm是一种高性能的依赖包管理工具，会把全局安装存储库，项目依赖放到存储库中，并在项目目录下增加软链链接到全局存储库的依赖包。相较于npm直接在工程目录下存储依赖包资源，更节省存储空间）

4、执行npm install pnpm安装pnpm

执行pnpm install 安装工程依赖

执行npm run dev启动工程

通过浏览器访问http://localhost:5173/验证工程构建效果

5、添加路由层，执行pnpm install vue-router@4安装vue-router

添加视图文件：/views/index.vue

<template>
  <div>1111</div>
</template>
<script setup>
// onMounted(() => {
//   console.log(111);
// });
</script>

添加路由文件：/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  { path: '/index', component: () => import('../views/index.vue') }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

修改App.vue，添加路由视图

<template>
  <div>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
</script>

访问：http://localhost:5173/#/index   查看效果，页面正常使用

应用增加页面keepAlive支持，App.vue代码修改：

<template>
  <div>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
    </router-view>
  </div>
</template>

<script setup lang="ts">

</script>

路由文件增加meta信息：

meta: {
      keepAlive: true
    }

在搭建应用过程中发现vscode会提示错误信息Co