This article introduces three installation methods of Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building data-driven web interfaces. 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. [Related recommendations: "vue.js Tutorial"]
The following introduces three installation methods of Vue.js:
1. Independent version
## We can download vue.js directly from the official website of Vue.js and reference it in .html through the <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:2. Use CDN method
##3.NPM method ( Recommended) It is recommended to use the NPM installation method when building large-scale applications with Vue.js. NPM can be used well with module packagers such as Webpack or Browserify. 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)Download and install node from the node.js official website. The installation process is very simple. It’s simple, just click Next and it’s OK. After installation, we open the command line tool (win R) and enter the
node -v command to check the node version. If the corresponding version number appears, then It means 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 version information of npm.
So far, the node environment has been installed, and the npm package manager is also available. Because some npm resources are blocked or are foreign resources, npm often causes The installation of dependent packages failed, so we also need the domestic image of npm----cnpm.
and enter npm install in the command line -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.
Run the command npm install -g vue-cli in the command line, and then Wait for the installation to complete.
Whether the installation is successful: vue -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 cut the directory. Go to the directory, as shown below:
In the NodeTest directory, run the command vue init webpack firstApp (initialize a complete version of the project) on 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 NodeTest directory), as shown below:
If we are in The folder where this project is stored has been manually created in the editor and cd to the project: vue init webpack; just initialize it, and also load the packages that webpack depends on:
Is it in this folder? Create it in the directory
After entering the command, we will be asked a few simple options, we can just fill them in according to our needs.
When running the initialization command, the user will be asked to enter a few 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:
Let’s introduce the directory and its function:
Build: The storage location of the final released code.
config:ConfigurationPath, port number and other information, we chose the default configuration when we first started learning.
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 (will be named based on base64 or other methods according to the size of the picture), such as logo, etc.
components: The directory contains component files one by one
router/index.js: Configuration Routing place
App.vue: Project entry component (with component), we can also write the component here instead of using the components directory. The main function is to connect our own defined components with the page for rendering. The
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 (files will be processed unchanged), such as pictures, fonts, etc.
test: initial test directory, can be deleted
.XXXX file: configuration file.
Index.html: The entry 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 the development package it depends on and plug-in information it depends on. (Approximate version)
Package-lock.json: Project configuration information file/version information of the development package it depends on and plug-in information it depends on. (Specific version)
README.md: Project description file.
webpack.config.js: webpack configuration file, for example: package .vue files into files that the browser can understand.
.babelrc: It is the configuration file for detecting es6 syntax, for example: the restrictions of which browsers are adapted
.gitignore: The configuration of which files are ignored when uploaded to the server ( For example, simulating local data mock prevents it from being ignored when getting submitted/packaged online. If it is not used, it can be configured here)
.postcssrc.js: Prefix configuration (css conversion configuration)
.editorconfig: Standardize the code, for example: whether root is detected, whether the end of the code is a newline, and how many spaces before the line are indented... (it is recommended to define this specification)
.eslintrc. js: Configure eslint grammar rules (configure which grammar rules are invalid in the rules attribute)
.eslintignore: Ignore eslint's check of the grammar 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 (modular 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 cnpm install; download in the project Plug-ins that the project depends on, and then npm run dev to run the project
After the installation is completed, we go to our own project to see that there will be an additional node_modules folder. Here are the dependency package resources we need.
After installing the dependent package resources, we can run the entire project.
Run the project
In the project directory, run the command npm run dev (npm run start), you will use Run our application with hot loading. Hot loading allows us to 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.
For more programming-related knowledge, please visit: Introduction to Programming! !
The above is the detailed content of Learn more about the 3 installation methods of vue.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
