Запуск проекта на 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.

Оцените статью
Procodings.ru
Добавить комментарий