search
HomeWeb Front-endJS TutorialHow to install vue.js
How to install vue.jsNov 23, 2020 am 11:10 AM
vue

How to install vue.js: First download and install node from the [node.js] official website; then run the command "npm install -g vue-cli" on the command line to install the vue cli scaffolding building tool; finally, in In the project directory, just run the command "npm run dev".

How to install vue.js

Recommended: "

vue tutorial

The operating environment of this tutorial: windows7 system, Vue3 version. This method is suitable for all brands of computers.

How to install vue.js:

1. Install node.js

Download and install node from the node.js official website

How to install vue.js The installation process is very simple, just keep clicking Next and it will be OK.
1.1 We open the command line tool (win R) and enter
node -v to check the version of node. If the corresponding version number appears, it means you have successfully installed it How to install vue.js 1.2.npm The package manager is integrated in node, so if you install node, you will have npm. Directly enter the
npm -v command to display the npm version information.
How to install vue.js Now that the node environment has been installed, the npm package manager is also available. I heard that because some npm resources are blocked or are foreign resources, npm often fails to install dependent packages. So we also need the domestic image of npm----cnpm (Taobao image)
2. Install cnpm
Enter
npm install -g cnpm --registry=https://registry on the command line .npm.taobao.org, and then wait. If no error is reported, it means the installation is successful (mine has been installed and the update success message is displayed), as shown below:
How to install vue.js After completion, we You can use cnpm instead of npm to install dependency packages.

3. Install the vue-cli scaffolding building tool

Run the command
npm install -g vue-cli on the command line and wait for the installation to complete. As shown below:

How to install vue.js Through the above three steps, the environment and tools we need to prepare are ready, and then we can start using vue-cli to build the project.

First we need to choose the location to store the project (here I will enter the E drive, you can also enter other drive letters to create) Use the DOS command

e:First go to my E drive, and then enter dir to view all files and folders in all E drives (you can see that there is no NodeDemo folder on E drive)
How to install vue.js 2. Next we Start creating a new folder (here I will put the created NodeDemo folder on the E drive, you can also choose other drive letters to store the demo) Enter
md NodeDemo and press the Enter key. Note There is a space after md. Then you can use dir to check whether the folder has been created: as shown below (I have created it)
How to install vue.js 3. Then use the
cd command to Directory changes to the selected directory: as shown below
How to install vue.js In the NodeDemo directory, run the command
vue init webpack firstApp in the command line. Explain this command. This command means to initialize a project, where webpack is the build tool, that is, the entire project is based on webpack. where firstApp is the name of the entire project folder. This folder will be automatically generated in the directory you specify (in my example, the folder will be generated in the NodeDemo directory). When running the initialization command, the user will be asked to enter There are several basic configuration options, such as project name, project description, and author information. For some information that you don’t understand or don’t want to fill in, you can just press Enter to fill it in, as shown below:

How to install vue.js
After waiting for a while, it will show that the created project was successfully created, as shown below
How to install vue.js
Next, we go to the NodeDemo directory to see if the file has been created:
How to install vue.js
Open the firstApp project. The directories in the project are as follows:
How to install vue.js

Introduce the directories and their functions:

  • build: final The location where published code is stored.

  • config: Configure the path, port number and other information. When we first started learning, we chose the default configuration.

  • node_modules: Project dependent modules loaded by npm, (dependent resources required by the entire project)

  • src: This is the main directory for our development , basically everything to be done is in this directory, which contains several directories and files:

  • assets: Place some pictures, such as logos, etc.

  • components: A component file is placed in the directory, and it does not need to be used.

  • App.vue: Project entry file, we can also write components here instead of using the components directory.

  • main.js: The core file of the project

  • static: Static resource directory, such as pictures, fonts, etc.

  • test: Initial test directory, you can delete

  • .XXXX file: configuration file.

  • index.html: Home page entry file, you can add some meta information or statistical code or something.

  • package.json: Project configuration file.

  • README.md: Project description file.

This is the directory structure of the entire project. Among them, we mainly make changes in the src directory.
(If you create a vue project for the first time, it seems that the node_modules dependency package resource will not be available. Anyway, if it is not available, just cnpm install will install the dependency.) My project now has node_modules after it is created. There is no need to cnpm install to install the dependent package resources if you already have the dependent package resource folder.

To install the dependencies required for the project, first cd and enter the firstApp folder
How to install vue.js
Then: execute cnpm install (cnpm can be used instead of npm here)
How to install vue.js
After the installation is completed, we go to our project to see (if not) there will be an additional node_modules folder, which contains the dependency package resources we need.
How to install vue.js
After installing the dependent package resources, we can run the entire project. Before running the project, be sure to ensure that the dependent package resources exist

Run the project

In the project directory, run the command npm run dev, which will run our application using hot loading. Hot loading allows After modifying the code, we can see the modified effect in real time without manually refreshing the browser.

After the project is started, enter the address after the project is started in the browser: localhost:8080How to install vue.js
The vue logo will appear in the browser:
How to install vue.js

The above is the detailed content of How to install vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

Hot AI Tools

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.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools