移动端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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值