Article directory

1. Introduction to the article
2. Environment construction
3. Install vue.js
4. Summary

1. Introduction to the article

I am mainly engaged in javaback-end development, but I am also very interested in the front-end, and I am determined to become a full-stack engineer.

Currently learned webthe Three Musketeers:

Hypertext Markup LanguageHTML(HyperTest Markup Language)
Cascading Style SheetsCSS(Cascading Style Shets)
JavaScript

Back-end development spring, mybatisand other frameworks, I guess the front-end must also have a framework.

Sure enough, I searched the Internet, and the front end has vue, react, angularJsand so on.

According to the personal plan, learn vuethe framework first.

If a worker wants to do a good job, he must first sharpen his tools. To learn vuethe framework well, start by downloading and installing it.

Next, I will 3download and install using two methods vue.js.

2. Environment construction

But vue.jsbefore installing, you need to install node.js.

How to install node.js, you can refer to the blog post: The latest tutorial on downloading and installing Node.js on the entire network in 2023

3. Install vue.js

I use the following 3method to install vue.js, but I recommend npm installthe way to install vue.js.

3.1 Method 1: Download the vue.js source code from the official website

We click on the link on the right to go to vue.jsthe official website, vue.jsthe official website link address: https://cn.vuejs.org

After entering the official website, select the document vue 2 文档, as shown in the figure below:

insert image description here

Or click this link to jump directly to Vue 2the home page: https://v2.cn.vuejs.org

After entering Vue 2the home page, click 起步the button, as shown in the figure below:

insert image description here

On vue 2the page, slide the mouse down until you see <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>, as shown in the following figure:

insert image description here

Open a new browser window, and copy the srcfile js(for example https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js) in to the address bar of the window, as shown in the following figure:

insert image description here

Use Ctrl + Aand Ctrl + C, after copying vue.jsthe script code in the above picture. Create a new one in your project js文件, copy the script code into this file, as shown in the following figure:

insert image description here

Create a new vueHtmlpage and import the newly created vue.jsfile, as shown in the following figure:

insert image description here

Run vueHtmlthe page, as shown in the figure below:

insert image description here

vueHtmlThe source code for is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue.js脚本</title>
</head>
<body>
    <div id="vm">
        <p>Hello, {
   
   {name}}!</p>
        <p>You are {
   
   {age}} years old!</p>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
     
     
        el: '#vm',
        data: {
     
     
            name: 'super先生',
            age: 18
        }
    });
</script>
</html>

At present, except for a small number of projects Vue 2, many projects have been upgraded Vue 3to the official website 在2023 年 12 月 31 日停止维护Vue 2, as shown in the following figure:

insert image description here

In order to prevent the code that cannot be downloaded later Vue 2, I uploaded it to my cloud disk, click the following link to access:

Link: https://share.weiyun.com/J3ITX61t
Password: xbf4wv

3.2 Method 2: Use npm install to create

Since it vuehas been upgraded to Vue 3, the official recommended npm installway to install it vue.

So, next, I used npm installto install vue.

I'm going to build the project into D:\project\testthe folder. Enter in the address bar of this folder cmd, it can be opened directly cmd命令框, and the current directory is located, as shown in the following figure:

insert image description here

In cmdthe command box, enter the following command

npm init vue@latest

This command will be installed and executed create-vue, it is Vuethe official project scaffolding tool, as shown in the following figure:

insert image description here

As you can see in the picture above, I wrote Project nameyes testAppand the rest is .Package namepackage.jsonNo

If you are not sure whether to enable a certain function, you can directly press the Enter key to select No.

After the project is created, follow the prompts in the above figure and execute the following commands in sequence:

cd testVue
npm install
npm run dev

insert image description here

Open the browser and enter: http://localhost:5173/ in the address bar , as shown in the figure below:

insert image description here

This page appears, indicating that the project has been created successfully.

3.3 Method 3: Use bower to download

bowerIt is a front-end package management tool that can help us track front-end packages and ensure that they are up to date (or a specific version you specify).

Installbower

bowerNeed node, npmand gitenvironment, after configuring these environments, npminstall them by way bower, as shown in the following command

npm install bower -g

insert image description here

I use Windows powershell, if you haven't installed it, you can click this link to install it: Install Windows powershell

view bowerversion

After the installation is successful, enter the following command to view bowerthe version:

bower -v

insert image description here

Installvue

Enter the following command to install vue:

bower i vue -g

insert image description here

4. Summary

Judging from the above vue.jsinstallation, I still recommend npm installthe way you use, after all, this is also the official recommended installation method.

Of course, I hope that installing the latest vue.jstutorial as above can help you.

Three ways to download and install the latest vue.js on the whole network (2023)

Article directory

1. Introduction to the article

2. Environment construction

3. Install vue.js

3.1 Method 1: Download the vue.js source code from the official website

3.2 Method 2: Use npm install to create

3.3 Method 3: Use bower to download

4. Summary

Guess you like