vue3+ts+vant移动端H5项目搭建的实现步骤

下面是“vue3+ts+vant移动端H5项目搭建的实现步骤”的攻略。

1. 搭建基础环境

首先需要安装Node.js和npm包管理器。安装Node.js过程中会自动安装npm。然后使用npm命令安装Vue CLI脚手架工具。

npm install -g @vue/cli

在安装完成Vue CLI后，就可以使用它来创建一个Vue项目了。

vue create my-project

这里我们选择使用vue create命令直接生成一个Vue3项目。执行命令后，会出现一些选项，根据自己的需要选择即可。

安装完成后，进入项目目录，使用以下命令启动项目：

npm run serve

2. 添加TypeScript支持

Vue CLI创建的项目默认是不支持TypeScript的。要添加TypeScript支持，需要执行以下命令安装相关依赖：

npm install --save-dev typescript ts-loader

然后在项目根目录中创建一个tsconfig.json文件，添加如下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

这里配置了一些TypeScript编译器的选项，可以根据自己的需要进行修改。

然后在项目的src目录下创建一个main.ts文件，将其中的内容替换为以下代码：

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

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

现在，我们就可以在Vue项目中使用TypeScript来编写代码了。

3. 添加Vant组件库

为了方便快速地构建移动端H5，我们使用Vant组件库，它提供了一些常用的移动端UI组件。

执行以下命令安装Vant：

npm i vant -S

安装完成后，在src/main.ts文件中添加以下内容：

import { createApp } from 'vue';
import App from './App.vue';
import { Button } from 'vant';

createApp(App).use(Button).mount('#app');

这样，就可以在项目中使用Vant组件了。

4. 添加路由功能

移动端H5项目中路由功能是必不可少的。使用Vue Router可以很方便地为项目添加路由功能。

执行以下命令安装Vue Router：

npm install vue-router@4

安装完成后，在src目录下创建一个router目录，然后在router目录下创建一个index.ts文件，添加以下内容：

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

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

export default router;

这里定义了一个路由配置，包含了一个路由路径为“/”的组件。

然后在src/main.ts文件中添加以下内容：

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

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

这样，就可以在项目中使用路由功能了。

至此，我们已经搭建了一个基于Vue3+TypeScript+Vant组件库+Vue Router的移动端H5项目。

以下是两个示例：

示例一

我们添加一个简单的页面，包含一个按钮和一个文本框。

首先在src/views目录下创建一个Test.vue文件，添加以下内容：

<template>
  <div>
    <van-button type="primary" @click="onClick">点击按钮</van-button>
    <van-field v-model="message" placeholder="请输入内容" />
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { Toast } from 'vant';

export default defineComponent({
  setup() {
    const state = reactive({
      message: ''
    });

    const onClick = () => {
      if (state.message == '') {
        Toast('请输入内容');
      } else {
        Toast(`您输入的内容是：${state.message}`);
      }
    };

    return {
      ...state,
      onClick
    };
  }
});
</script>

然后在src/router/index.ts文件中添加以下内容：

import Test from '../views/Test.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/test',
    name: 'Test',
    component: Test
  }
];

这里定义了一个新的路由路径“/test”，对应了添加的Test组件。

现在，就可以通过访问http://localhost:8080/#/test来查看效果了。

示例二

使用Vue3 Composition API实现一个计数器。

在src/views目录下创建一个Counter.vue文件，添加以下内容：

<template>
  <div>
    <div>
      <p>计数器：{{ count }}</p>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    const decrement = () => {
      state.count--;
    };

    return {
      ...state,
      increment,
      decrement
    };
  }
});
</script>

现在，就可以在项目中使用这个计数器了。可以在其他组件中调用它，或者单独作为一个页面展示。