Создание проекта Vue3

В предыдущей главеУстановка Vue3мы использовали командуnpm initдля создания проекта. В этой главе в основном представленаnpm createкоманда для создания проектов, а также использованиеvue uiкоманды для открытия графического интерфейса установки.

Рекомендуемая конфигурация IDE для разработки на Vue — этоVisual Studio Code + расширение Vue - Official：

Другие IDE поддерживаются следующим образом:

  • Sublime Text черезLSP-Volarподдержку.

  • vim / Neovim черезcoc-volarподдержку.

  • Поддержка emacs черезlsp-mode.

команда npm create

Используйте команду npm create для создания проекта Vue, обычно через Vite (инструмент сборки, официально рекомендуемый Vue) для создания приложения Vue.

В Vite npm create используется для запуска инструментов скаффолдинга (таких как vite@latest), чтобы быстро сгенерировать шаблон нового проекта.

Для получения более подробной информации о Vite см.:Учебник по Vite。

npm createСинтаксис создания проекта с помощью этой команды следующий:

npm create vite@latest <project-name> --template vue

Пояснение:

  • npm create: Команда, используемая для выполнения шаблона проекта. Она создаёт новый проект и инициализирует его из заданного шаблона.

  • vite@latest: vite — это инструмент для создания проектов Vue 3,@latestуказывает на использование последней версии Vite, гарантируя, что создаваемый проект основан на последней версии Vite. Без него@latest，npmоно попытается использовать текущую установленную версию.

  • <project-name>: Имя папки нового создаваемого проекта. Команда создаст папку и поместит в неё код шаблона. Например, выполнениеnpm create vite@latest my-vue-app --template vueсоздаст папку с именемmy-vue-appв текущем каталоге и поместить в него файлы шаблона проекта Vue.

  • --template vue：--template vueУказывает тип используемого шаблона. Vite поддерживает несколько шаблонов,vueявляется шаблоном, специально предоставленным для Vue 3. Есть также другие шаблоны, такие какvanilla、react、svelteи т. д.

Далее давайте создадим проект example-vue3-app:

npm create vite@latest

При выполнении приведённой выше команды сначала будет предложено ввести имя проекта и выбрать фреймворк:

> Project name: … example-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

Vite поддерживает несколько шаблонов. К распространённым относятся:

  • vue: проект Vue 3 (по умолчанию используется Vue 3)
  • vanilla: базовый шаблон без фреймворка
  • react: проект React
  • svelte: проект Svelte
  • preact: проект Preact
  • Вы также можете выбрать другие шаблоны в зависимости от ваших конкретных потребностей.

Вы можете использовать клавиши со стрелками для выбора. Мы выбираем Vue, затем появляется экран выбора варианта, и мы можем выбрать JavaScript, чтобы быстро начать:

> Project name: … example-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/example/example-test/example-vue3-app...

Done. Now run:

  cd example-vue3-app
  npm install
  npm run dev

После завершения установки мы входим в каталог проекта:

cd example-vue3-app

Вся структура каталогов показана на рисунке ниже:

Установите зависимости и запустите приложение:

npm install
npm run dev

Затем откройтеhttp://localhost:5173/, и вы увидите интерфейс приложения:

Кроме того, мы можем в файлеvite.config.jsустановить собственный порт. Например, следующий фрагмент устанавливает порт 3000:

Пример

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  server: {
    port: 3000, // Пользовательский номер порта
  },
})

команда vue ui

Помимо использования командыvue createдля создания проектов, мы также можем использовать инструмент визуального создания для создания проектов.

Выполните команду:

$ vue ui
->  Starting GUI...
->  Ready on http://localhost:8000
...

Выполнение приведённой выше команды откроет в браузере интерфейс управления проектом:

Мы можем нажать на опцию"Create", чтобы создать проект. Выберите "Create project here" внизу. Также можно выбрать путь в верхней части страницы:

Затем введите название проекта, выберите npm в качестве менеджера пакетов и нажмите Next:

Просто выберите конфигурацию по умолчанию:

Затем дождитесь завершения установки. После установки интерфейс управления выглядит следующим образом:

Другие расширения