There are several installation methods for vue.js

There are three common installation methods for vue.js: 1. Download the vue.js file directly from the Vue.js official website, and reference it in the html through the script tag; 2. Use the CDN method, in the html Directly use the CDN link in the script tag for reference; 3. Use the NPM tool to install.

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

Related recommendations: "vue.js Tutorial"

Vue.js (pronounced /vjuː/, similar to view) is a progressive method for building data-driven web interfaces frame. The goal of Vue.js is to enable responsive data binding and composed view components with the simplest possible API. Not only is it easy to get started, it is also easy to integrate with third-party libraries or existing projects.

The following introduces three installation methods of Vue.js:

Independent version

We can download vue directly from the official website of Vue.js. js, and referenced in html through the <script></script> tag. <script src="../vue.js"> </script> Do not use the minimally compressed version in the development environment, otherwise there will be no error prompts and warnings! (Used directly in the page)

Use vue multi-page development:

Introduce vue.js
Create a vue root instance new Vue({option})

Use 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 (<script src="https%20://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

NPM method (recommended) )

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

First, let’s list what we need next:

• node.js environment (npm package manager)

• vue-cli scaffolding construction tool

• cnpm npm’s Taobao mirror

##Install node.js

Download and install node from the node.js official website. The installation process is very simple. Just click Next and it will be ok. After installation, we open the command line tool (win R) and enter the node -v command to view the node. version. If the corresponding version number appears, it means that your installation is successful.

The npm 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.

So far, the node environment has been installed, and the npm package manager is also available. Because some npm resources are blocked or foreign resources, npm often causes The installation of dependent packages failed, so we also need the domestic image of npm----cnpm.

Install cnpm

Enter

npm in the command line install -g cnpm --registry=http://registry.npm.taobao.org, and then wait. If no error is reported, the installation is successful (mine has already been installed, and the update success message is displayed), as shown below:

After completion, we can use cnpm instead of npm to install dependent packages. If you want to know more about cnpm, check out the Taobao npm mirror official website.

Install the vue-cli scaffolding building tool (must be installed globally)

Run the command in the command line

npm install -g vue-cli and wait for the installation to complete.

• Whether the installation is successful: vue -V

• webpack version query: webpack -v

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

First we need to choose the location to store the project, and then use the command line to cd to the project directory. Here, I choose to create a new directory (NodeTest directory) under the c drive, and use cd to change the directory to that directory. Below, as shown below:

In the NodeTest directory, run the command in the command line vue init webpack firstApp (initialize a complete version of the project) . 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, it will be in NodeTest directory to generate the folder), as shown below:

If we have manually created the folder where this project is stored in the editor, cd to the project: vue init webpack; Just initialize it, and also load the packages that webpack depends on:

Whether it is created in this directory

After entering the command, you will be asked We have a few simple options that we can fill in according to our needs.

• Project name: Project name, if you don’t need to change, just press Enter. Note: Capital letters cannot be used here, so I changed the name to vueclitest
• Project description: Project description, the default is A Vue.js project, just press Enter, no need to write.
• Author: Author, if you have configured git author, he will read it.
• Install vue-router? Whether to install vue's routing plug-in, we need to install it here, so choose Y
• Use ESLint to lint your code? Whether to use ESLint to limit your code errors and style . We do not need to enter n here (recommendation). If you are developing in a large team, it is best to configure it.
• setup unit tests with Karma Mocha? Do you need to install the unit testing tool Karma Mocha? We don’t need it here, so enter n.
• Setup e2e tests with Nightwatch? Do you want to install e2e for user behavior simulation testing? We don’t need it here, so when entering n

, the user will be asked to enter a few words when running the initialization command. Basic configuration options, such as project name, project description, and author information. For information that you don’t understand or don’t want to fill in, you can just press Enter to fill it in. After a while, the project will be created successfully, as shown below:

Next, we go to the NoteTest directory to see if the file has been created:

Open the firstApp project, in the project The directory is as follows:

Introduce the directory and its function:

• build: The storage location of the final released code.
• config: Configure the path, port number and other information. When we first started learning, we chose the default configuration.
• node_modules: Various dependent modules required by the project loaded by npm.
• src: This is the main directory (source code) 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 logos, etc.
  • components: Each component file is placed in the directory
  • router/index.js: Where to configure routing
  • App.vue: Project For entry components (with components), we can also write components here instead of using the components directory. The main function is to connect our own defined components with the page for rendering, which is essential.
  • main.js: The core file of the project (the entry js of the entire project) introduces dependency packages, default page styles, etc. (an app.js file will be formed in index.html after the project is run).
  • static: Static resource directory, such as pictures, fonts, etc.
  • test: Initial test directory, you can delete the
• .XXXX file: configuration file.
• index.html: The entrance page of a single HTML page. You can add some meta information or statistics code or page reset style, etc.
• package.json: Project configuration information file/version information of dependent development packages and dependent plug-in information.
• README.md: Project description file.
• webpack.config.js: The configuration file of webpack, which packages .vue files into files that the browser can understand.
• .babelrc: It is the configuration of the file to detect es6 syntax
• .getignore: Ignore the configuration of the file (such as simulating local data mock to prevent it from being ignored when getting submitted/packaged online) Can be configured here)
• .postcssrc.js: Prefix configuration
• .eslintrc.js: Configure eslint grammar rules (configure which grammar rules are invalid in the rules attribute)
• .eslintignore: Ignore eslint’s check of the syntax rules of certain files in the project

This is the directory structure of the entire project, among which we mainly make modifications in the src directory (modularization development). This project is still just a structural framework, and all the dependent resources required for the entire project have not been installed yet.

cd project name; enter the project

Install the dependency packages/plug-ins required for the project (viewable in package.json): execute cnpm install (npm may There is a warning. You can use cnpm instead of npm here. To run other people's code, you need to install dependencies first)If no error is reported when creating the project, this step can be omitted. If an error is reported, cd to the project and run cnpm install / npm install

If you get other people’s projects or projects downloaded from gethub, the first step is to In the projectcnpm install;Download the plug-ins that the project depends on, and thennpm run dev run the project

## The installation is completed After that, we go to our own project and see that there will be an additional node_modules folder, which contains 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 (npm run start), which will run our application using hot loading. Hot loading can Let us see the modified effect 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:

It will be displayed in the browser The vue logo appears:

At this point, the three installation methods of vue have been introduced.

After the project is completed, enter the packaging command: cnpm run build; a dist file will be generated, which is our packaging file. If you click on the .html file to run it, it will be successful.

Build vue development environment (outline)

• Node.js must be installed

• Build vue development environment, install vue's scaffolding tool official command line tool

  npm install - -global vue-cli

• To create a project, you must cd into the corresponding project

  vue init webpack vue-demo01

  cd vue-demo01

• cnpm install / npm install If no error is reported when creating the project, this step can be omitted. If an error is reported, cd to the project and run cnpm install / npm install

• npm run dev/npm run start

Another way to create projects for small and medium-sized projects (recommended)

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

After getting someone else’s project and it cannot run normally, check whether there is the node_modules file (all the dependencies of the project ), if there is no cd to the project to install the project's dependencies: cnpm install/npm install

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit: programming teaching! !

The above is the detailed content of There are several installation methods for vue.js. For more information, please follow other related articles on the PHP Chinese website!