【Vue3 入门到实战】1. 创建Vue3工程

news2025/1/16 1:04:04

编辑

1. 学习目标

2. 环境准备与初始化

3. 项目文件结构

4. 写一个简单的效果

5. 总结

1. 学习目标

(1) 掌握如何创建vue3项目。

(2) 了解项目中的文件的作用。

(3) 编辑App.vue文件，并写一个简单的效果。

2. 环境准备与初始化

(1) 安装 Node.js 和 npm

为了方便管理，我们直接安装 nvm 来管理Node.js的不同版本，点击下方链接查看如何安装 nvm 当然，如果你已经安装了node.js，也可以跳过此步骤。

nvm-下载、安装、使用（2024/09/03更新）-CSDN博客

(2) 使用 Vite 构建工具创建项目

为什么不使用 cli 呢，原因如下

vite 是新一代前端构建工具，与cli相比，具有很多优势。

<1> 轻量快速的热重载，能实现急速的服务启动。

<2> 对TypeScript、JSX、css 等支持开箱即用。

<3> 真正的按需编译，不再等待整个应用编译完成。

构建命令

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

初始化启动

## 初始化
npm install

## 启动
npm run dev

启动成功

3. 项目文件结构

创建好的vue3项目结构如图所示。

各个文件的作用我放在了下面的表格中。

extensions.json	项目开发过程中推荐使用的 VS Code 扩展
settings.json	(VS Code) 的核心配置文件之一，用于定义编辑器的行为、界面设置
/node_modules	存放项目依赖的所有第三方库和模块
/public	存放不会被 Webpack 或其他构建工具处理的静态资源
/src	Vue.js 项目的核心部分，包含了项目的源代码和主要逻辑
main.ts	它负责创建 Vue 应用实例、配置全局插件和服务，并将应用挂载到 DOM 中
App.vue	Vue 3 项目中的根组件，它是整个应用的起点和容器
package.json	定义了项目的元数据、依赖项、脚本命令以及其他配置信息。
env.d.ts	用于定义全局类型声明，确保 TypeScript 编译器能够正确理解环境变量和其他全局对象。
vite.config.ts	Vite 构建工具的核心配置文件,可以配置插件、优化构建过程、设置别名、定义服务器选项等

4. 写一个简单的效果

(1) 在 /src/components 目录下创建一个组件 Person.vue。

Person.vue

<template>
    <div class="person">
        <h3>我是Person组件</h3>
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button v-on:click="changeName">修改名字</button>
        <button v-on:click="changeAge">修改年龄</button>
        <button v-on:click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    data() {
        return {
            name: '张三',
            age: 18,
            tel:'88888'
        }
    },
    methods:{
        changeName(){
            this.name = '李四'
        },
        changeAge(){
            this.age += 1;
        },
        showTel(){
            alert(this.tel)
        }
    }
}
</script>

<style>
    .person {
        background: blue;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

(2) 在 App.vue 文件中引入 Person.vue 组件

App.vue

<template>
  <div class="app">
    <h2>你好呀</h2>
    <Person></Person>
  </div>
</template>

<script lang="ts">
import Person from './components/Person.vue'
export default {
  name: 'App', 
  components: {
    Person
  }
}
</script>

<style>
.app{
  background: wheat;
  padding: 20px;
}
</style>

效果如下