当前位置：首页 > article >正文

Vue学习笔记集--create-vue

article 2025/3/30 0:37:11

create-vue

create-vue 是 Vue 官方提供的一个全新的脚手架工具，用于快速创建和配置 Vue.js 项目。以下是关于 create-vue 的详细介绍：

概述

功能：create-vue 提供了统一的目录结构、本地调试、热部署、单元测试、集成打包等功能，简化了项目的搭建过程，让开发者能够更加专注于业务逻辑的实现。
特点：它基于 Vite 构建，具有极速启动服务、快如闪电的热重载等优势，提供了更好的开发体验。

创建 Vue 3 项目

前提条件：确保已安装 Node.js，版本需为 16.0 或更高。

node -v

可以用于查看node版本

创建命令：在命令行中输入以下命令来创建一个新的 Vue 3 项目：
```
npm init vue@latest
```
这一指令将会安装并执行 create-vue，随后会提示输入项目名等信息。
项目配置：在创建过程中，可以根据提示选择是否添加 TypeScript、JSX 支持、Vue Router、Pinia 等功能。
安装依赖与启动：项目创建完成后，进入项目目录，执行 npm install 安装依赖，然后运行 npm run dev 启动项目。

创建 Vue 2 项目

如果需要创建 Vue 2 项目，可以使用以下命令：

npm init vue@2

这样会创建一个基于 Vue 2 的项目。

与 Vue CLI 的区别

构建工具：Vue CLI 基于 webpack，而 create-vie 基于 Vite，Vite 提供了更快速的启动和热模块替换速度。
功能定位：create-vie 本身只是一个脚手架工具，它根据你选择的功能创建一个预配置的项目，然后将其余部分委托给 Vite，项目可以利用 Vite 的插件生态系统。

示例

以下是一个使用 create-vue 创建 Vue 3 项目的完整示例：

打开命令行，输入：
```
npm init vue@latest
```
按提示输入项目名称，例如 my-vue-app。
根据需要选择是否添加 TypeScript、Vue Router 等功能。
项目创建完成后，进入项目目录：
```
cd my-vue-app
```
安装依赖：
```
npm install
```
启动开发服务器：
```
npm run dev
```
此时，项目会在浏览器中打开，显示默认的 Vue 欢迎页面。

create-vue 的出现简化了 Vue 项目的创建和配置过程，为开发者提供了更高效、便捷的开发体验。

项目目录结构

使用 create-vue 创建的项目会生成一个标准的 Vue 项目目录结构，以下是其项目目录以及关键文件的介绍：

my-vue-app/
├── node_modules/          # 项目依赖的第三方库
├── public/                # 静态资源目录
│   ├── favicon.ico        # 网站图标
│   └── index.html         # 项目的 HTML 模板
├── src/                   # 源代码目录
│   ├── assets/            # 项目资源文件（如图片、样式表等）
│   ├── components/        # 项目组件
│   ├── views/             # 项目页面组件
│   ├── App.vue            # 根组件
│   ├── main.js            # 应用入口文件
│   └── vite-env.d.ts      # Vite 环境变量类型声明
├── .env                   # 环境变量配置文件
├── .gitignore             # Git 忽略文件
├── package.json           # 项目配置文件
├── vite.config.js         # Vite 配置文件
└── README.md              # 项目说明文件

关键文件介绍

public/index.html
- 这是项目的 HTML 模板文件，所有的 Vue 组件都会被挂载到此文件中的 #app 元素上。
- 你可以在此文件中添加全局的 HTML 标签、元信息等。
src/main.js
- 这是应用的入口文件。
- 在此文件中，你会创建 Vue 应用实例，并挂载到 #app 元素上。
- 示例代码：
```
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```
src/App.vue
- 这是项目的根组件，所有的子组件都嵌套在这个组件中。
- 在此文件中，你可以定义应用的全局布局、样式等。
- 示例代码：
```
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
/* 全局样式 */
</style>
```
src/assets/
- 此目录用于存放项目的资源文件，如图片、样式表等。
- 你可以将项目的 CSS 文件放在此目录下，并在组件中引入。
src/components/
- 此目录用于存放项目的通用组件。
- 你可以将可复用的组件定义在此目录下，方便在不同的页面中使用。
src/views/
- 此目录用于存放项目的页面组件。
- 每个页面可以对应一个 Vue 文件，在此目录下定义页面的布局和逻辑。
vite.config.js

vite官网

Configuring Vite | Vite
- 这是 Vite 的配置文件，用于配置项目的构建和开发服务器等。

你可以在此文件中设置别名、插件等。

示例代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
   '@': '/src'
    }
  }
})

package.json

这是项目的配置文件，包含了项目的依赖、脚本等信息。
你可以在此文件中定义项目的启动、构建等脚本。

示例代码：

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9"
  }
}