create-vue: Vue 官方项目脚手架工具

背景介绍

create-vue^[1] 是 Vue 官方的项目脚手架工具，在此之前，使用的是 Vue CLI^[2]。

# Vue CLI
$ npm install -g @vue/cli
$ vue create my-project

# create vue
$ npm create vue@latest my-project

Vue CLI 工具创建的是基于 webpack 的 Vue 项目，create-vue 则是创建基于 Vite 的 Vue 项目，后者基于 native ESM 的按需加载模型，比前者的开发体验要优秀很多。

Vue CLI 现在已经进入维护模式，后来的项目都要用 create-vue 创建。

create-vue 的兼容支持

Vue 现在有 2 和 3 两个主要版本。虽然 Vue 3 发布有一段时间了，不过由于跟 Vue 2 之间存在太多细小的 API 变动，所以很多项目不太愿意迁移，现在 Vue 2 仍然是主流使用版本。因此 create-vue 提供了创建 Vue 2 和 Vue 3 项目的选项。

# create a project based on Vue 2
$ npm create vue@latest
# create a project based on Vue 3
$ npm create vue@legacy

注意：随着 Vue 2 中止官方维护，Vue 2.7 内置的 Composition API 支持，像 vue-demi 这样的迁移工具的出现，外加完善的迁移文档的说明，尽快掌握使用 Vue 3 编程将是大势所趋。

介绍完 create-vue 的出现背景，接下来，我们将使用 create-vue 创建一个基于 Vue 3 的项目，并讨论其项目结构的构成。

创建项目

执行 npm create vue@latest vue3-demos 指令，创建项目 vue3-demos。

为了简便，我没有引入 TypeScript、JSX 支持。

使用 VS Code 打开项目。

启动项目。

访问 http://localhost:5173/ ，就能看到项目启动成功。

接下来就来分析一下项目结构。

项目结构

创建出来的项目结构如下。

index.html

这是项目的入口文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

关键的逻辑在这一句。

<script type="module" src="/src/main.js"></script>

/src/main.js 文件是项目的入口逻辑。

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

main.js 都是项目的初始化和挂在操作——将应用 App 挂载到 index.html 的 #app 之上。另外，引入了路由（vue-router）和状态管理（pinia）的支持。

与 React 不同的是，Vue 生态没有那么多纠结的选择。vue-router 和 pinia 都是 Vue 官方团队在维护的方案，直接用它们就好了。

目录结构

另外，创建出来的项目已经为我们安排好目录结构了。

public/：存在静态文件的地方。比如 public/favicon.ico 这个文件，打包之后会跟 index.html 处于同级目录，因此在 index.html 是这样引入的：<link rel="icon" href="/favicon.ico">
src/：存在项目源代码的地方。下面具体介绍

src 目录

main.js：已经介绍过，这是定义项目入口逻辑的文件。包含应用挂载、路由和状态管理设置，全局样式的引入等
App.vue：应用根组件。其中定义了路由条件规则。<RouterLink to="/">Home</RouterLink>/<RouterView />

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

views/：应用页面，在定义路由时使用
router/：定义路由。为每个页面（view）定义对应的跳转路径

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }, 
    // /about 路由采用懒加载，即在访问到 /about 时才去加载这个页面的代码
    {
      path: '/about',
      name: 'about',
      // 路由级别的 code-splitting
      // 构建时，会被打包成单独的一个 chunk 文件(类似 About.[hash].js)，访问时再加载
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

components/：定义项目中可复用的组件。每个 view 都是由不同的组件构造而成的
store/：定义全局状态对象的地方，通常按照文件方式管理不同部分的状态数据。比如：store/counter.js 中定义了一个 useCounterStore() 的 Composition API，提供了 { count, doubleCount, increment } 的导出，这样存储和管理状态的都在一个地方，代码就比较好维护了

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
 
  return { count, doubleCount, increment }
})

assets/ 项目内引用的资源存放的地方。比如，你可以使用类似 <img src="@/assets/logo.svg"> 的方式引入图片，这些资源构建后，会存放在 assets/ 目录之下。@ 符号是项目 src/ 目录的别名，是在项目根目录下的 vite.config.js 中配置的

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      // 将 src/ 目录映射成 @ 别名
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

构建 & 预览

项目开发完成后，我们就可以使用 npm run build & npm run preview 来对要发到生产环境的项目在本地做预览了。两个命令的背后，都是调用 vite 的构建和预览命令

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
}

实际发布的生产环境有一点需要注意。默认网页加载的是根路径下的资源地址，如果你的站点是部署在某个域名的子路径下，打包出来的代码在部署后访问就有问题。那这个时候就需要通过指定 --base 选项来解决。

比如，我们要部署上去站点地址是 https://example.com/foo，那么在构建和预览时，就要指定 --base /foo。

与 Vite 创建的 Vue 模板项目的区别

Vite 也支持使用 npm create vite@latest 命令^[3]创建 Vue 项目。

$ npm create vite@latest my-vue-app -- --template vue
# create a Vue project with TypeScript support
$ npm create vite@latest my-vue-app -- --template vue-ts

不过这是一种通用方案。首先，创建出来的是 Vue 3 项目，这是不可选的；其次，也没有提供 Pina、vue-router、ESLint、Prettier 这样可选的配置支持。因此，如果你想全面体验 Vue 功能，推荐还是使用 create-vue 来创建项目进行开发或练习。