Vue3+TS+Vite移动端开发详细指南

2024-01-17 10:51:34

前言

随着移动互联网的飞速发展，H5移动端应用越来越受到欢迎。Vue3作为一款流行的前端框架，以其响应式、组件化和丰富的生态而成为H5移动端开发的不二之选。TypeScript作为微软推出的强类型语言，可以帮助我们编写更加健壮的代码。Vite是一款现代化的构建工具，它可以显著提高开发效率。

项目搭建

1. 初始化项目

首先，我们使用Vite命令行工具初始化一个新的Vue3项目：

npx vite create my-vue3-project

2. 安装依赖

接下来，我们需要安装Vue3、TypeScript以及相关的依赖：

npm install vue@3 vue-router@4 typescript @vitejs/plugin-vue @vitejs/plugin-typescript

3. 配置TypeScript

在tsconfig.json文件中，我们需要配置TypeScript的编译选项：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "jsx": "react-jsx",
    "lib": ["es2015", "dom"],
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

模块化与工程化

1. 目录结构

我们使用模块化的方式来组织项目代码，并将项目结构划分为以下几个目录：

my-vue3-project
├── node_modules
├── package.json
├── src
│   ├── components
│   ├── pages
│   ├── router
│   ├── store
│   ├── utils
│   └── main.ts
├── vite.config.ts
└── index.html

2. 路由配置

我们在router目录下创建index.ts文件，并配置路由：

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

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('../pages/Home.vue')
    },
    {
      path: '/about',
      component: () => import('../pages/About.vue')
    }
  ]
})

3. 路径别名配置

为了方便导入组件和模块，我们在vite.config.ts文件中配置路径别名：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

移动端适配

1. REM适配

为了让我们的应用在不同屏幕尺寸的设备上都能完美显示，我们需要进行REM适配。我们在utils目录下创建rem.ts文件，并配置REM适配：

export const rem = (px: number) => {
  const htmlFontSize = parseInt(window.getComputedStyle(document.documentElement).fontSize)
  return px / htmlFontSize + 'rem'
}

2. px转rem配置

我们在main.ts文件中配置px转rem：

import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'

createApp(App)
  .use(router)
  .mount('#app')

import './utils/rem'

Vuex的使用

1. 安装Vuex

我们使用npm命令安装Vuex：

npm install vuex

2. 创建Store

我们在store目录下创建index.ts文件，并创建Vuex Store：

import { createStore } from 'vuex'

export const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

3. 使用Vuex

我们在App.vue文件中使用Vuex：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { store } from './store'

export default {
  computed: {
    count() {
      return store.state.count
    }
  },
  methods: {
    increment() {
      store.commit('increment')
    }
  }
}
</script>