Table of contents

1. VSCode installation

Visual Studio Code is a lightweight yet powerful source code editor that runs on your desktop and is available for Windows, macOS and Linux. It has built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages and runtimes such as C++, C#, Java, Python, PHP, Go, .NET.

VSCode official website:

Visual Studio Code - Code Editing. Redefined https://code.visualstudio.com/ Select the operating system corresponding to your computer on the official website to install

Choose I agree and click Next

Select the installation path, it is recommended to install on a non-C drive

The default is the next step

installing--

Two, VSCode simple configuration

Install these three components in VSCode, the first is the Chinese package, the second is the component that can support writing html and css, and the third is the component that can directly open the browser in VSCode

Then select the corresponding folder, and you can write the corresponding code!

3. Download and import of Vue.js

There are three ways to download and introduce Vue.js:

1. Download the independent version on the vue official website and directly import it

2. Use CDN to import Vue.js

3. Install Vue.js using npm of node.js

In this blog, directly use the first and simplest method to introduce

Vue.js download address:

Installation — Vue.js (vuejs.org) https://v2.cn.vuejs.org/v2/guide/installation.htmlSelect the development version to download

After the download is complete, copy and paste Vue.js into the corresponding path. I pasted it into the current path. When importing, you can directly use the current path to import it.

4. The first application of Vue.js

The development of Vue.js application is inseparable from the Vue instance. The first application code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue-2.7.14.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--将msg的值绑定到p元素-->
        <p>{
   
   {msg}}</p >
        </div>
        <script>
        //创建vue实例
        var vm=new Vue({
           el:"#app",
        data:{
            msg:"Hello Vue.js"
            }
        })
        </script>
</body>
</html>

Results of the:

Note: The core of Vue.js allows declarative rendering of data into the DOM using a brief template syntax, so you can directly double-click to open the demo01.html page without accessing under server conditions, which is convenient for realizing the display effect of data binding.

Use VSCode to build the Vue.js development environment and the first application of Vue.js

1. VSCode installation

Two, VSCode simple configuration

3. Download and import of Vue.js

4. The first application of Vue.js

Guess you like