Vue has been released to 3.x now, but 2.x is still used more, just like the project I am working on now. As a backend, sometimes you have to know the knowledge of the front-end. This article will start with 2.x in order.

 

Vue. Js background

For the record, vue. Js and vue are the same thing, and vue is just an abbreviation of vue.

1. What is VUE

It’s official: VUE is a set of progressive frameworks for building user interfaces.

This shows that Vue is not a library in the first place, but a framework, which means it’s not an easy call. Libraries can be replaced at will, but frameworks are refactoring.

However, vue is progressive, which means that we can still use it as a class library for one or two components. At the same time, like a framework, you can let it take over the whole project, gradually using as many layers as you want, depending on your needs.

2. The advantage of vue

① Bidirectional data binding

Vue will set the element data according to the corresponding element, and carry out real-time binding of data through input box and get to obtain data, as well as data rendering of web pages and applications.

② Component development

Through the module encapsulation of VUE, it can split various modules designed in a Web development into separate components, and then through data binding, call corresponding template components, while passing in parameters, you can complete the development of the whole project.

Two, vUE installation

Although vUE has a variety of ways to install, but basically everyone is using NPM, stable and reliable.

npm install vue
Copy the code

You can also install it in the global directory with a -g argument

 

The use of VUe-CLI

Vue official provided a scaffold for us, so that we can quickly build a VUE project, just so that we can simply experience the VUE project.

1. Install the vue – cli

Open CMD and install vuE-CLI directly to global

npm install vue-cli -g
Copy the code

2. Initialize a project

Initializes the webPack template project

Once installed, go to the specified location and initialize the project from the command line. Type

vue init webpack my-project
Copy the code

Represents to create a template based on Webpack, which automatically downloads the WebPack template on Vuejs-Templates.

If the initialization is successful, when we go to configure vue-CLI, we just hit Enter all the way and make it default, because we don’t know it yet, just to start it up for fun.

There is no extranet cause download failure solution:

However, if you can’t access the Internet or have a poor network environment, the download may fail and you can’t connect to Github, and an error will be reported

Solution ① :

If you have a proxy server, you can set up a proxy for NPM

NPM config set proxy http:// proxy IP address: proxy port NPM config set HTTPS -proxy http:// proxy IP address: proxy portCopy the code

Solution ② :

If we can’t, that’s fine, we can download it manually and put it in

Go to the official website with git download: github.com/vuejs-templ…

After downloading, you need to put it in the specified directory, you can use the offline initialization statement to query where you need to put it:

vue init webpack projectName --offline
Copy the code

It will prompt no found under C:\Users\ username \.vue-templates\

But in general the.vue-templates directory has not been created, so let’s create it in CMD

mkdir .vue-templates
Copy the code

Then put the downloaded package into it, and pay attention to the correct name

Run the initialization instruction again, plus –offline for offline initialization:

vue init webpack projectName --offline
Copy the code

Since we don’t know how to configure it yet, we can just press Enter to configure the VUe-CLI entry and make it pass by default.

After initialization, install dependency packages at the project location

npm install
Copy the code
Failed at the [email protected] script error resolution

Another problem may arise, as shown in the figure

If yours also Failed at the [email protected] install script. An error means we have the same problem.

Error cause:

When installed, it will execute the install.js file in its directory. However, this file appears to visit a foreign website and is reported in error.

Solution ① :

There are a variety of solutions, first of all, we can replace its website into Taobao, the method is to execute the statement:

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
Copy the code

Solution ② :

If it still fails, you can simply ignore executing the script. Ignore-scripts: NPM will not execute scripts under script. Personally, it must be a risk, after all, something is missing, but most people on the Internet are dealt with in this way, and did not see any consequences, so we should also follow this way to solve the problem. Execute statement:

npm install chromedriver --ignore-scripts
Copy the code

Solution 3:

This is the ultimate solution, so if you can’t solve the previous one, you can refer to this one, which is how I solved it. Because my company is on the internal network and usually uses proxy to access the external network, I found that ONLY NPM configuration proxy can be used, and the address and port of proxy should be clear to me.

Enter CMD at any position:

NPM config set proxy http:// proxy IP address: proxy port NPM config set HTTPS -proxy http:// proxy IP address: proxy portCopy the code

Then delete the downloaded dependency directory node_modules and run it again directly

npm install
Copy the code

It will be found that one time may have passed, if not, then try again by method ① and ②.

Solution 4:

We’ve tried to minimize the impact, but if you really don’t have an Internet connection and really want to, the only way to do that is to delete the node_modules directory you downloaded and re-enter it

npm install --ignore-scripts
Copy the code

Of course, it doesn’t just ignore scripts for chromedriver, it obviously does this for all dependencies, but it looks like someone else on the web is doing this too, so it’s probably not a big problem, so there’s no way around it.

installed

After I configured the agent, the installation was successful:

The test start

Enter the command to launch the template:

npm run dev
Copy the code

Successful startup, browser access

There you go, brother Dei

 

I have no time to look at this recently, so I decided to publish it first. If there is any plan to update it in the future, I will directly update it here

 

 

 

Reference:

Error message is displayed when using vue-CLI to create project

www.cnblogs.com/gaozhiqiang…

NPM installed pit browser agent

Blog.csdn.net/haohaouniqu…