Vue development environment installation

Table of contents

Vue overview:

Vue features:

Vue official website:

1. Node.js installation and configuration 

1. Download and install node.js

Step1: Download the installation package

Step2: Install the program

Step3: View

problem solved:

解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

1. Cause of the problem

2. Solve try one

3. Solve attempt two

Step4: Environment configuration

Step5: Node.js test

Environment construction of vue front-end framework

Vue is a progressive JavaScript framework for dynamically building user interfaces

  • Build the user interface: turn the data into a user interface in some way
  • Progressive: Vue can be applied layer by layer from bottom to top. Simple applications only need a lightweight and compact core library, and complex applications can introduce various Vue plug-ins

Vue overview:

What is Vue: Vue.js is a corresponding system and front-end development library developed by Chinese-American (You Yuxi).
In February 2014, You Yuxi open sourced the front-end development library Vue.js.
On September 3, 2016, You Yuxi joined the Alibaba Weex team as a technical consultant.
He devoted himself full-time to the development of Vue.js, determined to build Vue into the world's top framework on the same level as Angular/React. The core library of Vue only focuses on the view layer, which is very easy to integrate with other libraries.

Vue is very suitable for developing complex single-page applications

Vue can realize two-way binding of data and view

Vue features:

① Lightweight framework, vue provides MVVM two-way data binding, relying on template expressions and computed properties , using simple and fast vue can split a web development Vue to interact with data and pages through instructions
③ Various modules designed in , into a separate component , and then through data binding , call the corresponding template component, and pass in parameters at the same time to complete the development of the entire project
④ Unlike traditional web pages that switch pages through links (refresh pages), Vue uses End-to-end routing realizes smooth switching of pages Vue's interface is responsive and has good display effects on various devices

Vue official website:

Vue.js - Progressive JavaScript framework | Vue.js Vue.js - Progressive JavaScript frameworkhttps ://cn.vuejs.org/

1. Node.js installation and configuration 

1. Download and install node.js

Check whether node is equipped on the computer.
[Command line input  node -v] [If the version information appears, it means that it has been installed]

I have not installed node.js here, and then I can do it step by step. 

Download the latest version from the official website : Download | The path where it is located is configured in the environment variable.

Step1: Download the installation package

Here I choose the windows64-bit operating system, as shown above.

Step2: Install the program

① After the download is complete, double-click the installation package to start the installation. Use the default configuration to install and just nextclick. The default installation path C:Program Filesis below , and you can also customize it

After the download is complete, install it (fool-like operation, the next step - the next step)

②The installation path is under C:\Program Files by default, and can also be customized and modified, and then click next (I set my installation directory here as D:\software\nodejs\ and change it according to my own needs.)

 

 ③The following figure is based on my own needs. I chose the default Node.js runtime, and then Next

Node.js runtime: Indicates the operating environment
npm package manager: Indicates the npm package manager
online documentation shortcuts: Online documentation shortcuts
Add to PATH: Add to environment variables

 
④ As shown in the following frame, I did not select it, but directly next

⑤Click Install to install

⑥Click finish to complete the installation

⑦ After the installation is complete, the installation package in .msi format has added the node startup program to the system environment variable path, and we can check the system variables for verification: Right click on [Personal Computer] → [Properties] → [Advanced System Settings]

⑧Click [Advanced] → [Environment Variables]

⑨Check [path] in the system variable, click [Edit]

⑩You will find that the installation package in .msi format has added the node startup program to the system environment variable path

Since npm is installed by default in Node.js, you can use the npm command in the global command without additional configuration. Test whether the installation is successful in cmd: enter node -v and npm –v to view the version information

Step3: View

① Now that the node program has been added to the global system variable, we can directly execute node anywhere in the CMD window, open the CMD window, and execute the command node -v to view the node version

[Note: At this time, the CMD window is opened, not node.exe is executed in the C:Program Files odejs directory]

② The latest version of node is also installed with npm during installation, execute to npm -vview the npm version

 Download cnpm:
Use cnpm (Taobao mirror image): When using npm to download dependencies, since the content is downloaded from a foreign website, instability may often occur, so you need to download cnpm instead of npm. cnpm is made by domestic Taobao
. Stable in domestic use, install cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
or npm install -g cnpm --registry=https://registry.npmmirror.com

problem solved:

解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

After installing  the node  environment, npm -v displays the following problem
npm WARN config global  --global--local are deprecated. Use  --location=global instead.

8.11.0

1. Cause of the problem

The problem arises that the command of previous versions of npm is usually XXX -g but with the version change, this old method is deprecated

2. Solve try one

Under the installation path of node,
we need to modify two files npm and npm.cmd

Modify line 23 of the npm file to the style shown below, the command is as follows, you can paste it directly

prefix --location=global

Modify line 12 of the npm.cmd file to the style shown in the figure below. The command is as follows, you can paste it directly, and save it after modification.

prefix --location=global

Here I encountered the problem of insufficient permissions, which can be solved as follows:

3. Solve attempt two

The computer file permissions are not enough,
we need to modify the two files npm and npm.cmd,
right-click the properties, and open the permissions safely.

The modification is now complete.

If you still have problems, you can do the next attempt (I got it done with the second solution, so I haven’t tried the third solution)

Solution attempt three:
When using npm, an error is reported: npm WARN config global --global, --local are deprecated. Use --location=global instead.

Just upgrade npm to the latest version
Upgrade method
1. Open cmd as an administrator in windows, and then execute the command
npm install -g npm-windows-upgrade
2. Change the script policy
Download Windows Power Shell
and run it as an administrator, Execute the command
set-ExecutionPolicy RemoteSigned


Enter Y
to successfully change the script policy 3. Run the command npm-windows-upgrade
on Windows Power Shell

problem solved!

The final result is as follows:

Step4: Environment configuration

① Open the installation directory (C:\Program Files nodejs by default) here mine is: D:\software\nodejs

② Create two new folders [node_global] and [node_cache] in the installation directory

③ Open the cmd command window again, and enter npm config set prefix "your path node_cache" (the default installation of "your path" is D:\software\nodejs) ④ npm config set cache "
your path node_cache" can be directly
When copying the newly created empty folder directory,  it is recommended to open CMD with administrator privileges, otherwise it may prompt that the privileges are not enough and an error will be reported

⑤ Set environment variables, open [System Properties] - [Advanced] - [Environment Variables], 系统变量create a new

variable name:NODE_PATH

variable:D:\software\nodejs\node_global\node_modules

(Used to tell the system that the downloaded modules or packages are here)

Step5: Node.js test

After the configuration is complete, install a module for testing, we will install the most frequently used express module, open the cmd window, and enter the following command to install the module globally:

 npm install express -g

Guess you like

Origin blog.csdn.net/weixin_46474921/article/details/126596539