LambdaLuke
 
  1. Vue
  2. JS Vue - New App

JS Vue - New App

Last modified: 12 February 2025

Instructions for creating a new Vue application using Webstorm.

Select Vue.js as the project generator.
Enter the name for the app in the location field.
Select and or download the latest version of node in the interpreter field.
Select npx create-vue as the CLI.
Untick use the default project setup.
Press create.

The project will now launch the command line app to build the project.
Answer the questions as appropriate to install the relevant components such as a router, store and typescript support, etc.
Click the npm install button.

If you wish to use a specific browser, edit the launch configurations and set the browser as appropriate.

Remove default project code

Within the src folder:

Open the assets folder and remove anything apart from the base.css and main.css files.
Delete the entire contents of the base.css and main.css files (apart from the base.css import at the top of main.css)

Delete all the components in the components folder except for TheWelcome.vue (which we will keep for reference) and all the icons within the folder.
Delete everything within TheWelcome.vue files script and template tags.

Delete the store within the stores folder, or leave it for reference. (if pinia store was installed)

Delete everything within the script, template and style tags in the views.

Within the app.vue file, delete the contents of the style tags, and delete anything apart from the routerlinks in the template. (if vue router was installed)

Note:

We have kept one of the components and a store in place as a reference to how they fit together in the project.
The names of these files can just be renamed as appropriate to your project when you need to use them.