Shulou(Shulou.com)06/02 Report--

Editor to share with you vscode to build a vue development environment, I hope you will learn a lot after reading this article, let's discuss it together!

Install node.js

Download and install node from the node.js official website, the installation process is very simple, all the way "next step" on it.

After the installation is complete, open the command line tool and enter node-v, as shown in the following figure. If the corresponding version number appears, the installation is successful.

The npm package manager is integrated in node, so typing npm-v directly shows the version information of npm as shown in the following figure.

Install cnpm

Because some npm resources are blocked or foreign resources, it often leads to the failure of installing dependency packages with npm, all of which also require the domestic image of npm-cnpm.

Type npm install-g cnpm-registry= http://registry.npm.taobao.org on the command line and wait. The installation is complete as shown below:

Install the vue-cli scaffolding building tool

Run the command npm install-g vue-cli from the command line and wait for the installation to complete.

With the above three parts, the environment and tools we need to prepare are ready, and then we start to use vue-cli to build the project.

Build a project with vue-cli

To create a project, we first select the directory, and then change the directory to the selected directory on the command line. Select the desktop here to store the newly created project, then we need to cd the directory to the desktop first, as shown below:

From the desktop directory, run the command vue init webpack firstVue from the command line. Explain this command, which means to initialize a project, where webpack is the build tool, that is, the entire project is based on webpack.

Where firstVue is the name of the entire project folder, which will be automatically generated in the directory you specify, as shown below:

When running the initialization command, ask the user to enter several basic options, such as project name, description, author and other information. If you do not want to enter directly, enter the default.

Dependencies required to install the project

To install the dependency package, first cd to the project folder (firstVue folder), then run the command cnpm install and wait for installation.

After the installation is complete, there will be an extra node_modules folder in our project directory firstVue folder. Here are the dependent package resources that our project needs.

After installing the dependency package, you can run the entire project.

Run the project

In the project directory, run the command npm run dev, which will run our application as a hot load, which allows us to see the effect of the changes in real time without manually refreshing the browser after modifying the code.

Here is a brief introduction to the npm run dev command, where the "run" corresponds to the dev in the scripts field in the package.json file, which is a shortcut to the node build/dev-server.js command.

After the project runs successfully, the browser automatically opens the localhost:8080 (if the browser does not open automatically, you can enter it manually). After running successfully, you will see the interface shown below.

Integrated element

After installing all the nodejs and running the entire project normally, the steps to integrate element into the project are as follows:

1. Enter the project root directory at the cmd command line and enter cnpm I element-ui-S

2. After the installation is completed, the package.json file will increase the element-ui dependency

After reading this article, I believe you have a certain understanding of vscode's method of building a vue development environment. You want to know more about it. Welcome to follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.