vue3学习记录（一）-- 工程创建和目录介绍

hello_neo
126 阅读2分钟

引言

Vue.js 作为当下流行的前端框架之一，已经更新到了第三个版本。Vue 3 带来了许多令人兴奋的新特性，比如 Composition API、响应式系统的改进、性能提升等。本系列博客将记录学习 Vue 3 的过程，从工程创建到深入理解各个特性。本文作为系列的第一篇，将介绍如何创建一个 Vue 3 工程以及其基本目录结构。

环境准备

在开始之前，请确保开发环境中已经安装了 Node.js 和 npm/yarn 包管理器。可以通过在终端运行以下命令来检查它们是否已安装：

node -v
npm -v 或 yarn -v

创建 Vue 3 工程

我们可以使用 Vue CLI 或 Vite 来创建 Vue 3 工程。Vue CLI 是 Vue 官方提供的命令行工具。而 Vite 是一个更现代化的开发服务器，它利用了原生 ES 模块特性，提供了更快的热重载，并且是现在官方更推荐的方式。

使用 Vue CLI 创建工程

  1. 全局安装 Vue CLI（如果尚未安装）：
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
  1. 创建一个新的 Vue 3 项目：
vue create helloworld
  1. 选择 Vue 3 配置：

在创建过程中，CLI 会询问你希望使用哪个版本的 Vue。选择 Vue 3 配置即可。

使用 Vite 创建工程

vite是vue官方推

  1. 创建一个新的项目目录：
mkdir helloworld
cd helloworld
  1. 初始化 npm 项目：
npm init -y
# 或者
yarn init -y
  1. 安装 Vite 和 Vue：
npm install -D vite vue
# 或者
yarn add -D vite vue
  1. 创建 Vite 配置文件 vite.config.js：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});
  1. 添加启动和构建脚本到 package.json：
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

目录结构介绍

创建工程后，我们可以看到一个标准的 Vue 3 项目目录结构如下：

helloworld
├── node_modules
├── public
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   ├── main.js
│   └── router
│       └── index.js
├── .gitignore
├── package.json
├── vite.config.js
└── yarn.lock 或 package-lock.json

目录说明

  • node_modules：存放项目依赖的第三方库。
  • public：存放静态资源文件，如 index.html。
  • src：源代码目录。
    • assets：存放静态资源，如图片、样式文件等。
    • components：存放 Vue 组件。
    • App.vue：根组件，相当于传统单页应用中的 index.html。
    • main.js：入口文件，用于创建 Vue 实例并挂载到 DOM 上。
    • router：存放路由配置文件。
  • .gitignore：用于 Git 版本控制时忽略的文件列表。
  • package.json：项目配置文件，包括依赖、脚本等信息。
  • vite.config.js：Vite 配置文件。
  • yarn.lock 或 package-lock.json：包版本锁定文件，确保在不同环境中安装相同的依赖版本。
avatar
文章
阅读
粉丝