Vue JS Part: 1

npm  install vue

Similar to CDN working in NPM Vue, all you have to do here is change the file source. See the example below:

Using the CLI (Command Line Interface) command

VueJS offers CLI facility for working in Server Environment. Also if you install VueJS Server with VueJS CLI, you don’t have to worry about any set up or configure. Everything you need for modern front-end development is pre-loaded, with the benefits of real-time, rapid development, and single-file application development. In addition, using the Vue CLI will give you the following benefits:

• It allows us to write our HTML, CSS, and JavaScript as we wish. It also allows us to write the latest versions of our components, TypeScript, SCSS, Pug, latest versions of ECMAScript in a single file (.vue).
• Great features of Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing, and End-to-end Testing.
• Here you will find the default plugin system so that you can easily add common features to your project.
• As an alternative to the command-line tool, you will get a graphical user interface called Vue UI
• It keeps Webpack configured for us, when we create any of our applications with Webpack it bundles, minifies, and optimizes all the JavaScript files, our CSS, and our dependencies for us properly.

Vue CLI 3 Installation

Vue CLI 3 comes as an NPM package. First, you need to make sure your PC has Node.js and NPM (NodeJS Package Manager). If you want to work with Vue CLI 3, you need the latest Node.js version 8.9 or higher. If you already have Node.js installed on your PC, you can check the version of Node.js with the following command:

node -v

After checking with the above command, if you feel you need to reinstall or update, you need to go to Node.js and download the appropriate version of your OS Installer. And Node.js Package Manager (NPM) will be automatically installed when installing a newer version.

Another thing is that Vue CLI version 3 has been completely rewritten. The previous version of Vue CLI has been renamed to use vue / cli.

And so it is best to first uninstall the Node.js Package vue-cli version on your PC with the following command.

npm uninstall vue-cli -g

Once the uninstall is complete, install the Node.js Vue CLI with the following command:

npm install -g @vue/cli

Once the installation is complete, you can check the version of your Vue with the following command:

vue -version

Create Project in Vue

New projects can be created in Vue CLI 3 in two ways. One is through the vue create command in the command line, and the other is through the VU UI. First we will look at the installation in the command line:

Installation on Command Line

To create a new project in Vue, you need to give the command vue create your_project_name. Just like the following:

vue create my-vue-app-01

After running this command you will be prompted to choose either default (babel, eslint) preset or Manually select features.

We will select this option Manually select features here, then Vue will show us all the features.

Here you can use the up and down arrow keys on your keyboard to navigate the features. And you can use John to select the spacebar. For example, we will select the default feature Babel and Linter / Formater as well as the Router Feature here.

Now you will be asked whether to use the History Mode of your Router. Here we will select NO.

After selecting, when we hit again, it will show us the Configure list of our selected Linter / Formatter.

However, we will select the ESLint + Prettier option here.

• ESLint is a tool for identifying and reporting ECMAScript / JavaScript code to perfect and avoid bugs.
• And Prettier is the feedback code formatter. It analyzes your code and applies a consistent style to the code by rewriting it with its own rules and takes the maximum length of the line if necessary, wrapping the code.

Now we will decide whether linting will end with save or commit.

We have selected Lint On Save here, now you will get two more options, one is In dedicated config file and the other is In package.json. Now we will select this option In dedicated config file.

Lastly, you get the option to save the settings as preset.

We have selected N here (no preset will be saved), now we will get the next question, where you will use Yarn as package manager or use NPM, the question will be asked.

Then after selecting NPM as Package Manager, your new project will be created and the required dependencies will be downloaded and installed.

Finally, you will see a success message on the command line and your new project will be created.

By now your new project has been created and configured. Now you need to access your project folder with cd command. Then you can run the Web server with the following command, and start the development.