Запуск проекта на Vue 3

tl;dr

Используйте npm init vue@latest. Это использует Vite в качестве инструмента сборки и предоставляет опции для включения инструментов управления состоянием, маршрутизации и тестирования.

Запуск проекта vue

Существует 3 официальных способа начать проект Vue. Vue CLI, похоже, устарел с появлением Vue 3.

1. Vue create-vue: официальный инструмент для создания проекта Vue.

   npm init vue@latest

2. Vite preset: инструмент сборки, цель которого – обеспечить более быструю и компактную разработку современных веб-проектов.

   npm create vite@latest

3. Vue CLI: призван стать стандартным инструментарием для экосистемы Vue. Похоже, что это предназначено для Vue 2.

   vue create hello-world

Vue create-vue

Официальная документация рекомендует эту команду для запуска проекта с поддержкой build-tool. Команда предоставляет несколько опций, которые по умолчанию имеют значение No. Я рекомендую включить Typescript, Vue Router и Pinia. Остальные можно добавить в проект, когда вы будете готовы их использовать.

npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vuecreate
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes

Предварительная настройка Vite vue

npm create vite@latest

√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in C:Usersngojasandboxvite-project...

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

Установите Tailwind

После создания проекта перейдите в папку проекта и установите Tailwind.

https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Затем отредактируйте следующие 3 файла:

./tailwind.config.js – замените строку content на эту.

content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],

./src/index.css – создайте этот новый файл

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/main. – вставить после последнего оператора импорта

import './index.css'

Затем вам нужно удалить секцию <style> в ./src/App.vue, чтобы она не конфликтовала с css Tailwind.