Shulou(Shulou.com)06/02 Report--

This article mainly introduces the installation of vue.js which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Vue.js (pronunciation / vju steps /, similar to view) is a progressive framework for building a data-driven web interface. The goal of Vue.js is to implement responsive data binding and composite view components through the simplest possible API. It is not only easy to use, but also easy to integrate with third-party libraries or existing projects.

Here are three ways to install Vue.js:

1. Independent version

We can download vue.js directly from Vue.js 's website and quote it in the tag. -> do not use the minimum compressed version of the development environment, or there will be no error prompts and warnings!

two。 Use the CDN method

BootCDN (domestic): https://cdn.bootcss.com/vue/2.2.2/vue.min.js, (domestic instability)

Unpkg: https://unpkg.com/vue/dist/vue.js, will remain consistent with the latest version released by npm. (recommended)

Cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js, such as ()

3.NPM method

It is recommended to use NPM installation method when building large applications with Vue.js. NPM works well with module balers such as Webpack or Browserify. Vue.js also provides supporting tools to develop single-file components.

First, make a list of what we need next:

Node.js environment (npm package manager)

Vue-cli scaffolding building tool

Taobao image of cnpm npm

1) install node.js

Download and install node from the node.js official website. The installation process is very simple. Click the next step to ok. After installation, we open the command line tool (win+R) and type

Node-v command to check the version of node. If the corresponding version number appears, it means that you have successfully installed it.

The npm package manager is integrated in node, so if you install node, you will have npm. Enter the npm-v command directly to display the version information of npm.

So far, the node environment has been installed, and there is also a npm package manager. Due to some npm resources being blocked or foreign resources, npm installation of dependent packages often fails, so we also need the domestic image of npm-cnpm.

2) install cnpm

Type npm install-g cnpm-- registry= https://registry.npm.taobao.org on the command line, and then wait. No error indicates that the installation is successful (mine has been installed and the update message is displayed), as shown below:

When you're done, you can install the dependency package with cnpm instead of npm. If you want to know more about cnpm, check out Taobao npm mirror official website.

3) install vue-cli scaffolding construction tool

Run the command npm install-g vue-cli from the command line and wait for the installation to complete.

With the above three parts, the environment and tools we need to prepare are ready, and then we start to use vue-cli to build the project.

First of all, we need to select the location to store the project, and then use the command line to change the directory to the selected directory. Here, I choose to create a new directory (NodeTest directory) under disk c, and cut the directory to that directory with cd, as shown below:

From the NodeTest directory, run the command vue init webpack firstApp on the command line. Explain this command, which 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 case, it will be generated in the NodeTest directory), as shown in the following figure.

When you run the initialization command, you will be asked to enter several basic configuration options, such as project name, project description and author information. You can always press enter to fill in some information that you do not understand or do not want to fill in, and wait for a while. It will show that the project has been created successfully, as shown below:

Next, let's go to the NoteTest directory to see if the file has been created:

Open the firstApp project and the directories in the project are as follows:

Introduce the catalogue and its function:

Build: the location where the final released code is stored.

Config: some information such as configuration path and port number. We chose the default configuration when we first started to learn.

The project loaded by node_modules:npm depends on the module.

Src: here is the main directory for our development. Basically, everything we need to do is in this directory, which contains several directories and files:

Assets: place some pictures, such as logo, etc

Components: there is a component file in the directory, but you don't need it.

App.vue: the project entry file, or we can write the 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, which can be deleted

.XXXX file: configuration file.

Index.html: home entry file, you can add some meta information or the same statistical code and so on.

Package.json: project configuration file.

README.md: the documentation for the project.

This is the directory structure of the entire project, where we mainly make changes in the src directory. This project is still a structural framework, and the dependent resources required for the entire project have not yet been installed.

Dependencies required to install the project: execute cnpm install (here you can use cnpm instead of npm)

After the installation is complete, we will take a look at our own project and there will be an additional node_modules folder, which is the dependency package resources we need.

After installing the dependency package resources, we can run the entire project.

Run the project

In the project directory, run the command npm run dev, which will run our application as a hot load, which allows us to see the effect of the changes in real time without manually refreshing the browser after modifying the code.

After the project is started, enter the address after the project is started in the browser:

Vue's logo appears in the browser:

Thank you for reading this article carefully. I hope the article "what are the installation methods of vue.js" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.