How to set up VeuJs Environment?
Vue Js Environment Setup
There are many ways to install VueJS. Some of the ways on how to carry out the installation are discussed ahead.
Local Script Using the <script> tag directly in HTML file
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html>
Go to the home website https://vuejs.org of VueJS and download the vue.js according to the need. There are two renditions for use - production variant and development adaptation. The improvement adaptation isn't limited, though the creation variant is limited as appeared in the accompanying screen capture. The Development version will help with the warnings and debug mode during the development of the project.
VueJs Using CDN Links:
We can also start using the VueJS file from the CDN library. The link https://unpkg.com will give the latest version of VueJS. VueJS is also available on jsDelivr (https://www.jsdelivr.com/) and cdnjs (https://cdnjs.com//).
We can host the files at our end, if required and get started with VueJS development. Like:
<head>
<script type = "text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
Using NPM
For huge scope applications with VueJS, it is prescribed to introduce utilizing the npm bundle. It accompanies Browserify and Webpack alongside other important devices, which help with the turn of events. Following is the order to introduce utilizing pm.
npm install vueUsing CLI Command Line
VueJS also provides CLI to install the vue and get started with the server activation. To install using CLI, we need to have CLI installed which is done using the following command.
npm install --global vue-cliafter running the command:
Once done, it shows the CLI version for VueJS. It takes a few minutes for the installation.
+ vue-cli@2.8.2
added 965 packages in 355.414sFollowing is the command to create the project using Webpack.
vue init webpack myproject....
To get started, use the following command.
cd myproject
npm install
npm run dev...
Once we execute npm run dev, it starts the server and provides the URL for a display to be seen in the browser which is as shown in the following screenshot.
The project structure using CLI looks like the following.
