Vue.js 应用快速启动教程：使用 create-vue-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00386/article/details/142811855

Vue.js 应用快速启动教程：使用 create-vue

create-vue 🛠️ The recommended way to start a Vite-powered Vue project 项目地址: https://gitcode.com/gh_mirrors/cr/create-vue

概览

本教程将引导您了解并使用 create-vue，这是创建由Vite驱动的Vue项目推荐的方式。我们将深入项目的核心组成部分，解析其目录结构、启动文件以及关键配置文件，帮助您更好地理解和上手新项目。

1. 项目目录结构及介绍

创建后的Vue项目通常遵循以下标准目录结构：

my-project/
├── node_modules/           # 第三方依赖库存放目录
├── public/                 # 静态资源目录，如 favicon.ico 和 index.html
│   └── index.html         # 入口HTML文件，加载你的应用
├── src/                    # 应用的主要源代码目录
│   ├── components/         # 组件目录
│   ├── App.vue             # 主组件，应用的入口点
│   ├── main.js 或 main.ts  # 程序入口文件，设置Vue实例
│   └── router/             # 路由管理目录（可选，取决于是否使用路由）
├── .gitignore              # Git忽略文件列表
├── package.json            # 包含项目元数据，定义脚本命令和依赖
├── README.md               # 项目说明文档
├── babel.config.js         # Babel配置文件（如果使用了Babel）
├── postcss.config.js       # PostCSS配置文件（用于CSS预处理）
└── vite.config.js          # Vite的配置文件

注意：实际目录结构可能会根据你的项目需求有所不同，尤其是当你在创建项目时选择了不同的特性。

2. 项目的启动文件介绍

main.js 或 main.ts：这是应用程序的入口点。在这里，您初始化Vue应用，并可能导入App.vue作为根组件，以及配置其他全局对象或插件。例如：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

3. 项目的配置文件介绍

vite.config.js：这是Vite的配置文件，它允许你自定义构建和开发服务器的行为。这里你可以设置各种选项，比如公共路径(base)，定义环境变量，调整加载器配置等。示例配置片段可能包括：

export default defineConfig({
    base: '/',
    plugins: [],
    server: {
        port: 3000,
    },
    build: {
        target: 'esnext',
        outDir: 'dist',
    },
});