Simple and clear! Build your environment in 3 different ways!
Introduction of environment construction method
Vue.js has several environment construction methods. In this article, I will explain how to build an environment for Vue.js in the following three ways.
-
How to use a CDN
-
How to use Vue CLI
-
How to use Vite CLI
How to use a CDN
A CDN is a system that takes over the load of a server by using a cache server. Vue.js developers put the main body of Vue.js on CDN, so you can use it easily without having to download Vue.js.
You can use Vue.js by writing the CDN URL in the HTML script tag as shown below.
<script src="https://unpkg.com/vue@next"></script>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<div id="app">
<body>
<div id="intro" style="text-align: center">
<h1>{{ message }}</h1>
</div>
</body>
</div>
</html>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello World",
};
},
}).mount("#app");
</script>
How to use Vue CLI
For large applications using Vue.js, we recommend installing using the NPM package. Vue CLI comes with useful tools for development, you can use Browserify and Webpack.
https://nodejs.org/ja/download/
Below is the command to install using NPM.
npm install vue
Vue.js provides a CLI. To use the CLI, you need to install it using the following command.
npm install --global vue-cli
To create a project using CLI, use the following command:
vue init webpack myproject
Project configuration is interactive. If you don’t know what the question is, you can set it appropriately.
1.Project Name
- Project description
3.Author
4.Use Build
-
Install vue-router?
-
Use ESLint to lint your code?
-
Pick an ESLint preset
-
Setup unit tests with karma + Mocha?
-
Setup e2e tests with Nightwatch?
You should be able to finish the project in about 1 minute. Let’s start it with the following command
cd myproject
npm install
npm run dev
Once the project is launched http://localhost:8080/#/ to check it out.
How to use Vite
Another way to build a Vue.js environment is to use Vite.
It’s very easy to use, run Vite by running the following NPM command in the CLI.
npm init vite@latest
When executed, the project is set interactively. The setting contents are as follows.
-ProjectName Set the project name. Enter vite-project here.
-
Select a framework Sets the framework to use. Here we choose Vue.
-
Select a variant Select the programming language and additional frameworks you want to use. Select JavaScript here.
Next, execute the following commands in order.
// move current
cd vite-project
// install module
npm install
// Start Vue.js
npm run dev
The application will launch when execution is complete. If you access the following IP address and the following screen is displayed, it is a success. http://127.0.0.1:5173/
Bonus (how to use web tools)
There is a way to use web tools that can manipulate and execute JavaScript.
-
[Vue SFC](https://sfc.vuejs.org/#eNo9j71uwzAMhF+F5eIWqCV0NZQA3foGXbikjpw40B9EOR0EvXspp8imu9N9OFb8TEndN4sTGp7zmgqwLVs6Ulh9irlAhWwXaLDk6GGQrwMFCnMMXMDzBQ49fx2 +rHMRvmN255fhjYLRD5yARBTrkzsVKwrAXD+Ote7l1owWtbtrSFuB++jj2boDoeSEEhn9bOM7PlaN/pTUjWOQ3bW36T9gwgl2p3uytmvCaymJJ615mfu1N1YxX7S8VN5CWb1Vlv34k+Mv2yxgwo5oFB q2P3/sZE8=)
at the end
In this article, I introduced three ways to build a Vue.js environment. I explained how to use CDN, how to use Vue CLI, and how to use Vite CLI. We also showed you how to use the web tools.
Each method has its own characteristics, so we recommend that you choose the method that is most convenient for you and proceed with your learning. By using Vue.js, you can create a single page application easily and smoothly.
Vue.js is relatively easy to learn compared to other frameworks. However, it has many functions, and it may take some time to master it. By all means, please refer to this article and enjoy Vue.js.