Introduction to Vue.js environment building tutorial

This article mainly shares with you a super simple Vue.js environment building tutorial to help you quickly build a vue environment. It has certain reference value. Interested friends can refer to it

vue, this new tool, can indeed improve efficiency. The essence of getting started with vue: (The premise is that the network is connected)

1. Use vue to develop the front-endFramework , first we need an environment, which relies on node, so we need to install node first, and use npm in node to install the required dependencies, etc.

Here is a little tip: If you use npm to install some tools directly in cmd, it will be slower, so we use Taobao's npm Mirror:
Enter npm install -g cnpm –registry=https://registry.npm.taobao.org to install the npm mirror. Use cnpm instead where npm is used in the future. Enough.

After installing the npm image, start installing the global vue-cli scaffolding. The reason why we use vue-cli is because this tool can help us build the template framework we need, which is relatively simple. Method: cnpm install -g vue-cli and press Enter to verify whether the installation is successful. Enter vue in the command line, and the vue information will come out --- Installation successful

2. After installing the scaffolding, start creating. A new project: Command vue init webpack vue_project(The last one is the name of the project folder I created)

will appear during the process

3 cd vue_project

Install dependencies and generate node_modules directory (install dependent code library)

npm install=> This folder node_modules will be generated (note: when we copy the vue project built with vue-cli scaffolding to other places, we must delete the node_modules directory, otherwise cnpm run dev cannot be executed in other places, and the path is designed Question. After deletion, you need to re-cnpm install)

npm run dev After the preparations are completed, test whether the default app.vue module in the project can run. This needs to be installed first. Check the server environment. When you run "npm run dev" in the command line or enter "

npm run dev

", the build/dev-server.js file will be executed. When running "npm run build" (used to execute release ) is the build/build.js file. We can start from these two files for code reading and analysis.

Devdeendencies represent some dependencies of our compilation process.

Readme file: project description file

Each component is divided into three parts: template, logic, stylecnpm run dev Just press Enter and it will open Browserhttp://localhost:8080

Application scenario:

For front-end applications with complex interaction logic ;

It can provide basic architectural abstraction;

It can ensure front-end user experience through AJAX data persistence.

Benefits:

When the front-end does some operations with the data, you can make data persistence on the back-end through AJAX requests. There is no need to refresh the entire page, just Change the part of the data in the DOM that needs to be changed. Especially in mobile application scenarios, refreshing the page is too expensive and will reload many resources. Although some will be

cached

, the DOM, JS, and CSS of the page will be re-parsed by the page, so mobile pages usually Will make SPA single page application.

Vue.js features: MVVM framework, data-driven, componentized, lightweight, concise, efficient, fast, and module-friendly.

Related articles:

Building Bootstrap components through pure Vue.js

Detailed description of powerful Vue.js components

Super comprehensive summary of vue.js usage######

The above is the detailed content of Introduction to Vue.js environment building tutorial. For more information, please follow other related articles on the PHP Chinese website!