vue.js installation and configuration

In front-end learning, after learning HTML, CSS, and JS, we usually choose to learn some frameworks, such as Jquery, AngularJs, etc. This series of blog posts is aimed at students learning Vue.js.

1. How to use Vue.js simply

Just like Jquery we have learned before, we can also use direct references when using Vue.js in the program method, download it directly and introduce it with the tag, Vue.js will be registered as a global variable. Here is an important tip: there are two versions on the official website of Vue.js, the development version and the production version. We use the development version during development, and it will give corresponding warnings when encountering common errors.

Of course, like Jquery, Vue.js can also be referenced in the code using CDN. Just copy and paste the code directly on the bootcdn website, it is simple and convenient.

2.vue environment construction

We recommend using NPM installation when building large-scale applications with Vue.js. NPM can be packaged well with modules such as Webpack or Browserify used in conjunction with the device. Vue.js also provides supporting tools to develop single-file components.

The recommended development environment for Vue.js is Nodejs. npm: is the package manager under Nodejs. Since using npm in China will be very slow, it is recommended to use the Taobao NPM mirror (its URL is http://npm.taobao.org/). We use webpack to merge and package resources and vue-cli to generate user-generated Vue project templates.

Then, let’s focus on how to build a suitable environment.

(1) How to install Nodejs

Open the official website of Nodejs (https://nodejs.org/en/), we can see Download in the middle of the page For this word, just select the corresponding version to download. It is recommended to download the later version. You can also choose Other Downloads below to download other versions and Mac versions.

After the download is complete, just use the fool-proof installation. After the installation is completed, you can first simply test whether the installation is successful, and then configure the environment. Press the [win R] key on the keyboard, enter cmd, and then press Enter to open the cmd window. Enter node -v and npm -v to display the currently installed version number, which means the installation is successful. The new version of Node.js has its own npm. The function of npm is to manage the packages that Node.js depends on. It can also be understood as the things that need to be installed and uninstalled by Node.js.

(2) Install cnpm

Since some npm resources are blocked or are foreign resources, it often occurs when npm is used to install dependent packages. Failed, so either FQ or use the domestic mirror cnpm. Open https://npm.taobao.org/, we can learn that this is a complete npmjs.org mirror, which can be used instead of the official version (read-only). The synchronization frequency is currently once every 10 minutes to ensure that it is synchronized with the official service as much as possible .

Also enter npm install -g cnpm --registry=http://registry.npm.taobao.org on the command line and wait.

After the installation is completed, we enter cnpm -v to check. When the following picture is displayed, the installation is successful.

(3) Install vue-cli

vue-cli is A global scaffolding is used to help build the required template framework. Similarly, enter the command in cmd: npm install -g vue-cli. In this piece of code -g means for global use. Like cnpm, a long list of files will be displayed after the installation is completed. Enter vue -v to view the vue version. At this point, the environment has been basically set up successfully.

(4) Test, create the first Vue.js project

Enter in the command line: vue init webpack my-first-demo(project folder name ).

The settings here and later can be entered, or you can directly press Enter and N.

In this way, the first Vue.js project is created. Open the corresponding storage address and you will see this file. Mine is placed under user/Lunlun/.

By typing cd my-first-demo, you can enter the directory specific folder and enter on the command line: cnmp install or npm install to install dependency packages. Re-open the folder under the path. We can see that there is one more node_modules folder in the folder than the previous one. The scaffolding installation is now complete.

(5) Enter: npm run dev in the command line.

This command will run our application using hot loading. Hot loading allows us to see the modified effects in real time without manually refreshing the browser after modifying the code.

Here is a brief introduction to the npm run dev command. 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 will automatically open localhost:8080 (if the browser does not open automatically, you can enter it manually). After running successfully, you will see the interface shown below. At this point, the task is completed.

This article introduces the installation and configuration of vue.js. For more related content, please pay attention to the php Chinese website.

Related recommendations:

JS implements browser printing and print preview

JS callback function example

Inheritance implementation of js