项目搭建套餐:
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