Create a new project with Vue Router using the Vue CLI UI — Transcript

Transcript of the free Vue.js lesson Create a new project with Vue Router using the Vue CLI UIwatch the video lesson.

In this video, we are going to create our project using the Vue CLI, which stands for Command Line Interface. js development, allowing you to quickly scaffold a new project through the terminal. js projects, which is what we will use in this course. If you have never worked with the Vue CLI before, then you will need to install it globally.

You will need to install this using the terminal. Open up your terminal and type npm install dash g at view slash cli or if you are using yarn you need to type yarn global add at view slash cli and then press enter. Then you just have to type view ui and press enter. This will automatically launch the view ui.

If it is the first time you are using this, then you will be brought directly to the View Project Manager. Otherwise, it will take you to the dashboard of your last opened project. To start a new project, you need to go to the Project Manager and click on Create. Choose where you want the project to be saved and click the Create a New Project Here button.

Give your project a name. Here you can choose which package manager you want to use. We will just use the default. Click on the Next button.

Here you can select the default preset if you just want a basic project. However, as we are going to need the router, let's choose manual so that we can add it. The only thing we need from here is the router, so let's select that and click on next. For our linting, let's select ESLint and Britier.

And we can leave the lint on save option activated. Next, you'll be asked if you want to save your presets. We don't need this for this course. but feel free to save it so that you can easily build projects with the same presets.

To visualize your project in a browser click on the tasks in the view UI and choose serve. Click on the run task button and once it is finished and the build has been a success you can click on the button open app which will open your app in a new browser window. You will see we now have a basic router installed and can switch between the home and the about routes. In this video, we are going to create our project using the Vue CLI, which stands for Command Line Interface.

js development, allowing you to quickly scaffold a new project through the terminal. js projects, which is what we will use in this course. If you have never worked with the Vue CLI before, then you will need to install it globally. You will need to install this using the terminal.

Open up your terminal and type npm install dash g at view slash cli or if you are using yarn you need to type yarn global add at view slash cli and then press enter. Then you just have to type view ui and press enter. This will automatically launch the view ui. If it is the first time you are using this, then you will be brought directly to the View Project Manager.

Otherwise, it will take you to the dashboard of your last opened project. To start a new project, you need to go to the Project Manager and click on Create. Choose where you want the project to be saved and click the Create a New Project Here button. Give your project a name.

Here you can choose which package manager you want to use. We will just use the default. Click on the Next button. Here you can select the default preset if you just want a basic project.

However, as we are going to need the router, let's choose manual so that we can add it. The only thing we need from here is the router, so let's select that and click on next. For our linting, let's select ESLint and Britier. And we can leave the lint on save option activated.

Next, you'll be asked if you want to save your presets. We don't need this for this course. but feel free to save it so that you can easily build projects with the same presets. To visualize your project in a browser click on the tasks in the view UI and choose serve.

Click on the run task button and once it is finished and the build has been a success you can click on the button open app which will open your app in a new browser window. You will see we now have a basic router installed and can switch between the home and the about routes.