Vue 2 With TypeScript — Create a Project

To setup the project, you will use the terminal and the vue-cli. If you do not have this installed on your computer yet, you can install it globally using npm:

npm install -g @vue/cli

Create Project Wizard

To create our project, do:

vue create myproject

Next it will ask you if you want to choose a default preset or manually select individual features. Use the arrow key to move up/down choose Manually select features by pressing the enter key:

Vue CLI v4.2.2
? Please pick a preset:
default (babel, eslint)
❯ Manually select features

Now move up/down with arrows and use the space-bar to check/uncheck the features you want. For this project select TypeScript, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing only then hit the Enter key:

Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
◯ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
◯ E2E Testing

It will then ask you a series of questions. Make the following choices:

Use class-style component syntax? Yes

? Use class-style component syntax? (Y/n) Y

Use Babel alongside TypeScript? No

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (y/N) N

Use history mode for router? No

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N

Pick a CSS pre-processor: Sass/SCSS (with node-sass)

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
Less
Stylus

Pick a linter / formatter config: ESLint with error prevention only

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)

Pick additional lint features: Lint on save

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
◉ Lint on save
◯ Lint and fix on commit

Pick a unit testing solution: Mocha + Chai

? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
Jest

Where do you prefer placing config … ? In dedicated config files

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json

The final choice will prompt to you save all the previous selections as a preset:

? Save this as a preset for future projects? (y/N) y

It’s ok to say No here, but if later you wish to create another project with the exact same features as this one and not having to go through all the steps, then go give it a name and save it.

NOTE: It might also ask you at this point if you want to use yarn or npm as your package manager. If so, please choose npm.

The vue-cli will now create the project, install all the required NPM packages, create the configuration files, and stub some preliminary code (Home and About views, a simple HelloWorld component, Vuex store, etc)

At the end it should display a message similar to this:

The first command will navigate to the current sub-directory called myproject, the second will serve the app with the vue-cli-service. You’ll see a message similar to this displayed:

From the web browser, navigate to the http://localhost:8080/ address and you’ll see application home page rendered:

The myproject has been created with two stubbed views, Home.vue and About.vue and two routes have been added to the Vue router to allow navigation to those two views.

What We Learned

• How to create the basic plumbing for a Vue app using the vue-cli
• How to serve the app using the vue-cli service through the command npm run serve

Originally published at http://www.scalingvue.com on February 27, 2020.