This repository provides a template for a Vue 3 application including the following components and configurations:
- Vue 3
- Vue CLI 4
- Vue Router
- Vuex
- ESLint and Prettier
- Jest
- SASS
Note that some installers may modify your PATH
environment variable, so be sure to close and reopen any terminal windows or apps that use PATH
after installing something.
Installing Node is required in order to use Node Package Manager (NPM).
- Visit https://nodejs.org.
- Download the installer for either the LTS version or the current version.
- Install Node. Be sure to add Node to your
PATH
(this is selected by default in the installer). - Open a terminal window.
- Execute the following command:
npm --version
. The NPM version should be reported.
Yarn provides an improved experience over NPM. Yarn is optional but recommended. The yarn
package is actually a bootstrapper used to bootstrap Yarn per repository.
- Open a terminal window.
- Execute the following command:
npm install --global yarn@latest
. - Execute the following command:
yarn --version
. The Yarn version should be reported.
- Execute the following command:
npm install --global @vue/cli@latest
. - Execute the following command:
vue --version
. The Vue CLI version should be reported.
- Execute the following command:
npm install --global prettier@latest
.
- Visit https://code.visualstudio.com.
- Download the Visual Studio code installer.
- Install Visual Studio Code.
These steps may be skipped if you do not want to create a Git repository for your project.
- Create and clone an empty GitHub repository.
- Open a terminal window.
- Navigate to the local project directory.
- If you do not have a global Git name configured, execute the following command:
git config user.name "Your Name"
. - If you do not have a global Git email address configured, execute the following command:
git config user.email 12345+obfuscated@users.noreply.github.com
. Using your obfuscated GitHub email address is recommended.
- Open the local project directory in Visual Studio Code.
- Visual Studio Code may prompt you to install recommended extensions. Install them if you wish.
- Open a terminal window within Visual Studio Code.
All subsequent steps will assume you have opened the local project folder in Visual Studio Code and have opened a terminal window within Visual Studio Code.
- Execute the following command:
vue create .
. - Select whatever options you want.
- Execute the following command:
yarn set version berry
.
- Add a
.gitignore
file with the following contents:
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Yarn
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
# Visual Studio Code
.vscode/*
!.vscode/extensions.json