tl;dr
Use npm init vue@latest
. This uses Vite as the build tool and provides options to enable state management, routing and testing tools.
Starting a vue project
There are 3 official ways to start a Vue project. Vue CLI appears to be obsolete with the arrival of Vue 3.
-
Vue create-vue: the official Vue project scaffolding tool
npm init vue@latest
-
Vite preset: a build tool that aims to provide a faster and leaner development experience for modern web projects
npm create vite@latest
-
Vue CLI: aims to be the standard tooling baseline for the Vue ecosystem. This appears to be for Vue 2.
vue create hello-world
Vue create-vue
The official docs recommend this command to start a build-tool-enabled project. The command provides several options that default to No. I recommend you enable Typescript, Vue Router and Pinia. The others can be added to your project when you are ready to use them.
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 preset
npm create vite@latest
√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue
Scaffolding project in C:\Users\ngoja\sandbox\vite-project...
Post project creation
Install Tailwind
After project creation, cd to your project folder and install Tailwind.
https://tailwindcss.com/docs/guides/vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Then edit the following 3 files:
./tailwind.config.js - replace the content
line with this
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
./src/index.css - create this new file
@tailwind base;
@tailwind components;
@tailwind utilities;
./src/main. - insert after the last import statement
import './index.css'
You will then want to delete the <style>
section in ./src/App.vue so it won't conflict with the Tailwind css.
Top comments (0)