新手也能搭建的Vue3+TypeScript项目

前端

2024-01-01 06:23:10

前言

Vue3已经发布beta版本，笔者在新项目中尝试体验了下Vue3+TypeScript全家桶，通过本文记录下项目搭建的过程。

环境准备

在开始之前，请确保您的机器上已经安装了以下软件：

Node.js v12或以上版本
Vue CLI v4或以上版本

安装Vue CLI

如果您还没有安装Vue CLI，可以运行以下命令进行安装：

npm install -g @vue/cli

安装Vue3

Vue3目前尚未正式发布，但您可以通过以下命令安装beta版本：

npm install -g @vue/cli-plugin-vue3

项目创建

创建项目

使用Vue CLI创建项目：

vue create my-project

在命令行中选择使用Vue3，TypeScript和Babel：

? Please pick a preset:
  Default (Vue 3.0 + Babel + TypeScript)
> Default (Vue 2.x + Babel)
  Manually select features

安装依赖项

项目创建完成后，进入项目目录，安装依赖项：

cd my-project
npm install

项目结构

项目结构如下：

my-project
├── package.json
├── src
│   ├── App.vue
│   ├── main.ts
│   └── router
│       ├── index.ts
│       └── routes.ts
├── public
│   ├── index.html
│   └── favicon.ico
└── vue.config.js

编写组件和页面

组件

在src/components目录下创建组件。例如，创建一个名为HelloWorld.vue的组件：

<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

页面

在src/views目录下创建页面。例如，创建一个名为Home.vue的页面：

<template>
  <div>
    <h1>Home</h1>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

注册组件和页面

在src/router/index.ts文件中，注册组件和页面：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router