异常教程

Vue3 创建项目（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，Vue.js 作为一款轻量级且灵活的框架，凭借其简洁的语法和高效的组件化开发模式，成为开发者构建单页应用（SPA）的首选工具之一。随着 Vue3 的发布，其在性能、API 设计和生态兼容性上实现了全面升级，为开发者提供了更强大的工具链支持。本文将围绕 Vue3 创建项目 这一核心主题，从环境准备、工具安装、项目搭建到代码实践，逐步引导读者掌握 Vue3 项目的完整创建流程。无论是编程新手还是有一定经验的开发者，都能通过本文快速上手 Vue3，为后续的深度开发打下坚实基础。

一、环境准备：搭建开发基石

1.1 确认 Node.js 和 npm 的安装

Vue3 项目依赖 Node.js 环境运行，因此第一步需确保本地已安装 Node.js（建议版本 16.0.0 或更高）和包管理工具 npm。

  • Node.js 安装：访问官网（https://nodejs.org/）下载对应操作系统的安装包，安装完成后通过终端输入 node -v 和 npm -v 验证版本。
  • npm 替代工具：若对下载速度有较高要求，可考虑替换为 yarn 或 pnpm，但本文默认使用 npm 进行演示。

1.2 安装 Vue CLI

Vue CLI（Command Line Interface）是 Vue 官方提供的项目脚手架工具，能够快速生成符合规范的 Vue3 项目结构。通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，输入 vue --version 确认版本号，确保工具可用。

二、创建 Vue3 项目：从零到运行

2.1 使用 Vue CLI 创建项目

通过 Vue CLI 的交互式界面或命令行参数，开发者可快速生成 Vue3 项目。以下是两种常用方法：

方法一：交互式创建

在终端中执行以下命令，根据提示选择配置项：

vue create my-vue3-project

在选择 Vue 版本时，需选择 Manually select features，并在接下来的选项中勾选 Babel、Linter 等基础功能，最后选择 Vue 3 作为预设版本。

方法二：快速创建（预设 Vue3）

若希望跳过交互流程，可通过以下命令直接指定 Vue3：

vue create my-vue3-project --default --preset ./vue3-preset.json

需提前准备一个包含 Vue3 配置的 vue3-preset.json 文件，或直接使用 @vue/webpack 预设。

2.2 项目结构解析

成功创建项目后，进入目录 cd my-vue3-project，通过 ls 或 tree 命令查看文件结构。典型 Vue3 项目目录如下：

文件/文件夹功能说明
public/存放静态资源（如 index.html）
src/核心代码目录，包含组件、样式、路由等
src/main.js入口文件，负责挂载 Vue 应用到 DOM 节点
src/App.vue根组件，定义应用的顶层结构
package.json项目依赖和脚本配置文件
.gitignoreGit 版本控制的忽略规则

三、深入理解 Vue3 核心概念

3.1 组件化开发：像搭积木一样构建应用

Vue 的核心思想是组件化，开发者可通过 <template>、<script>、<style> 三部分定义组件。例如，一个简单的计数器组件 Counter.vue 可编写为：

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

<script setup>  
import { ref } from 'vue'  
const count = ref(0)  
const increment = () => count.value++  
</script>

这里通过 ref 响应式引用 count，当 increment 被触发时，视图会自动更新——这正是 Vue 的响应式系统在发挥作用。

3.2 Composition API：让代码逻辑更清晰

Vue3 引入的 Composition API，通过 setup() 函数将组件逻辑集中管理，解决了 Vue2 中 Options API 的代码混杂问题。例如，上述计数器组件可进一步优化为：

<script setup>  
import { ref } from 'vue'  

const state = ref({  
  count: 0  
})  

const actions = {  
  increment() {  
    state.value.count++  
  }  
}  

// 通过解构简化模板调用  
defineExpose({ ...state.value, ...actions })  
</script>

此模式将数据和方法分组，如同“整理工具箱”一般，便于大型项目维护。

四、配置优化与实战案例

4.1 配置项目环境

通过 vue.config.js 文件，开发者可自定义 Webpack 配置。例如，添加代理解决跨域问题：

module.exports = {  
  devServer: {  
    proxy: {  
      '/api': {  
        target: 'http://localhost:3000',  
        changeOrigin: true,  
        pathRewrite: { '^/api': '' }  
      }  
    }  
  }  
}

4.2 实战案例：创建待办事项列表

步骤一：创建 TodoList.vue 组件

<template>  
  <div>  
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务..." />  
    <ul>  
      <li v-for="(todo, index) in todos" :key="index">  
        {{ todo }}  
        <button @click="removeTodo(index)">删除</button>  
      </li>  
    </ul>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue'  

const newTodo = ref('')  
const todos = ref([])  

const addTodo = () => {  
  if (newTodo.value.trim()) {  
    todos.value.push(newTodo.value)  
    newTodo.value = ''  
  }  
}  

const removeTodo = (index) => {  
  todos.value.splice(index, 1)  
}  
</script>

步骤二：在 App.vue 中引入组件

<template>  
  <div id="app">  
    <TodoList />  
  </div>  
</template>  

<script setup>  
import TodoList from './components/TodoList.vue'  
</script>

步骤三：运行项目

执行 npm run serve 启动开发服务器，访问 http://localhost:8080 查看效果。

五、常见问题与解决方案

5.1 安装依赖失败

若遇到网络问题导致 npm install 失败，可尝试：

  • 使用淘宝镜像：npm install --registry=https://registry.npmmirror.com
  • 检查防火墙或代理设置

5.2 组件未渲染

  • 确保组件名首字母大写（如 TodoList 而非 todolist）
  • 检查 @vue/compiler-sfc 等依赖是否安装

结论

通过本文的分步讲解，读者已掌握从 Vue3 创建项目 到基础组件开发的完整流程。Vue3 的响应式系统、Composition API 和强大的生态工具链，为开发者提供了高效且灵活的开发体验。建议读者在理解本文内容后，尝试扩展案例功能（如添加本地存储、路由跳转），并深入阅读官方文档以解锁更多高级功能。记住，实践是掌握技术的最佳途径——现在，是时候动手创建属于你的第一个 Vue3 项目了！

最新发布

查看更多文章