Home Web Front-end JS Tutorial Introduction to Vue.js environment building tutorial

Introduction to Vue.js environment building tutorial

Mar 22, 2017 pm 01:30 PM
vue.js build

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)

Introduction to Vue.js environment building tutorial

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1504
276
Detailed graphic explanation of how to integrate the Ace code editor in a Vue project Detailed graphic explanation of how to integrate the Ace code editor in a Vue project Apr 24, 2023 am 10:52 AM

Ace is an embeddable code editor written in JavaScript. It matches the functionality and performance of native editors like Sublime, Vim, and TextMate. It can be easily embedded into any web page and JavaScript application. Ace is maintained as the main editor for the Cloud9 IDE and is the successor to the Mozilla Skywriter (Bespin) project.

Explore how to write unit tests in Vue3 Explore how to write unit tests in Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js has become a very popular framework in front-end development today. As Vue.js continues to evolve, unit testing is becoming more and more important. Today we’ll explore how to write unit tests in Vue.js 3 and provide some best practices and common problems and solutions.

How to quickly build a statistical chart system under the Vue framework How to quickly build a statistical chart system under the Vue framework Aug 21, 2023 pm 05:48 PM

How to quickly build a statistical chart system under the Vue framework. In modern web applications, statistical charts are an essential component. As a popular front-end framework, Vue.js provides many convenient tools and components that can help us quickly build a statistical chart system. This article will introduce how to use the Vue framework and some plug-ins to build a simple statistical chart system. First, we need to prepare a Vue.js development environment, including installing Vue scaffolding and some related plug-ins. Execute the following command in the command line

Vue.js vs. React: Project-Specific Considerations Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

Can buildings be built in the wild in Mistlock Kingdom? Can buildings be built in the wild in Mistlock Kingdom? Mar 07, 2024 pm 08:28 PM

Players can collect different materials to build buildings when playing in the Mistlock Kingdom. Many players want to know whether to build buildings in the wild. Buildings cannot be built in the wild in the Mistlock Kingdom. They must be within the scope of the altar. . Can buildings be built in the wild in Mistlock Kingdom? Answer: No. 1. Buildings cannot be built in the wild areas of the Mist Lock Kingdom. 2. The building must be built within the scope of the altar. 3. Players can place the Spirit Fire Altar by themselves, but once they leave the range, they will not be able to construct buildings. 4. We can also directly dig a hole in the mountain as our home, so we don’t need to consume building materials. 5. There is a comfort mechanism in the buildings built by players themselves, that is to say, the better the interior, the higher the comfort. 6. High comfort will bring attribute bonuses to players, such as

Is vue.js hard to learn? Is vue.js hard to learn? Apr 04, 2025 am 12:02 AM

Vue.js is not difficult to learn, especially for developers with a JavaScript foundation. 1) Its progressive design and responsive system simplify the development process. 2) Component-based development makes code management more efficient. 3) The usage examples show basic and advanced usage. 4) Common errors can be debugged through VueDevtools. 5) Performance optimization and best practices, such as using v-if/v-show and key attributes, can improve application efficiency.

Quickly install PyTorch in PyCharm: an easy guide Quickly install PyTorch in PyCharm: an easy guide Feb 24, 2024 pm 09:54 PM

PyTorch Installation Guide: Quickly set up a development environment in PyCharm PyTorch is one of the most popular frameworks in the current field of deep learning. It has the characteristics of ease of use and flexibility, and is favored by developers. This article will introduce how to quickly set up the PyTorch development environment in PyCharm, so that you can start the development of deep learning projects. Step 1: Install PyTorch First, we need to install PyTorch. The installation of PyTorch usually needs to take into account the system environment

Best practices and precautions for building a web server under CentOS 7 Best practices and precautions for building a web server under CentOS 7 Aug 25, 2023 pm 11:33 PM

Best practices and precautions for building web servers under CentOS7 Introduction: In today's Internet era, web servers are one of the core components for building and hosting websites. CentOS7 is a powerful Linux distribution widely used in server environments. This article will explore the best practices and considerations for building a web server on CentOS7, and provide some code examples to help you better understand. 1. Install Apache HTTP server Apache is the most widely used w

See all articles