Vue学习笔记集--create-vue

create-vue

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

概述

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

创建 Vue 3 项目

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

node -v

可以用于查看node版本

1. 创建命令：在命令行中输入以下命令来创建一个新的 Vue 3 项目：

   npm init vue@latest
   

   这一指令将会安装并执行 create-vue，随后会提示输入项目名等信息。

2. 项目配置：在创建过程中，可以根据提示选择是否添加 TypeScript、JSX 支持、Vue Router、Pinia 等功能。

3. 安装依赖与启动：项目创建完成后，进入项目目录，执行 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 项目的完整示例：

1. 打开命令行，输入：

   npm init vue@latest
   

2. 按提示输入项目名称，例如 my-vue-app。

3. 根据需要选择是否添加 TypeScript、Vue Router 等功能。

4. 项目创建完成后，进入项目目录：

   cd my-vue-app
   

5. 安装依赖：

   npm install
   

6. 启动开发服务器：

   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              # 项目说明文件

关键文件介绍

1. public/index.html

   • 这是项目的 HTML 模板文件，所有的 Vue 组件都会被挂载到此文件中的 #app 元素上。
   • 你可以在此文件中添加全局的 HTML 标签、元信息等。

2. src/main.js

   • 这是应用的入口文件。

   • 在此文件中，你会创建 Vue 应用实例，并挂载到 #app 元素上。

   • 示例代码：

     import { createApp } from 'vue'
     import App from './App.vue'createApp(App).mount('#app')
     

3. src/App.vue

   • 这是项目的根组件，所有的子组件都嵌套在这个组件中。

   • 在此文件中，你可以定义应用的全局布局、样式等。

   • 示例代码：

     <template><div id="app"><router-view></router-view></div>
     </template><style>
     /* 全局样式 */
     </style>
     

4. src/assets/

   • 此目录用于存放项目的资源文件，如图片、样式表等。
   • 你可以将项目的 CSS 文件放在此目录下，并在组件中引入。

5. src/components/

   • 此目录用于存放项目的通用组件。
   • 你可以将可复用的组件定义在此目录下，方便在不同的页面中使用。

6. src/views/

   • 此目录用于存放项目的页面组件。
   • 每个页面可以对应一个 Vue 文件，在此目录下定义页面的布局和逻辑。

7. 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'}}
    })
    

8. 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"}
     }