Home >Web Front-end >Vue.js >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:
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})
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>
)
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.Install cnpm
Enternpm 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:
Install the vue-cli scaffolding building tool (must be installed globally)
Run the command in the command linenpm install -g vue-cli and wait for the installation to complete.
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.
, 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:
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
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.npm install - -global vue-cli
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!