Vue project construction and practical example tutorial

Due to Vue’s relatively gentle learning process and novel technical ideas, it has been favored by the majority of front-end and back-end developers. At the same time, its easy-to-understand API and data binding functions have also won its popularity. Many users. This article mainly explains the construction and actual implementation of the Vue project, so it will not cover too much its API and syntax. It is designed to help entry-level users of Vue understand the steps and methods of building a Vue project from scratch.

First of all, before building a vue project, we need to understand the classification of vue projects. Here I mainly divide them into two categories: (1) Directly introduce the vue.js file (2) Use vue single file components

According to the above two categories, directly introducing the vue.js file is like directly introducing jQuery into the page. Such a project has many flaws and can only use some basic APIs and limited functions. It is generally mainly used for Beginner users and small projects. This article mainly explains the second type of Vue project built using Vue but with file components.

There are many ways to build a vue project. First, we need to use the corresponding construction tools. The officially recommended build tools mainly include webpack and browserify. Here I recommend that you use webpack for building. At the same time, in addition to building tools, we also need to use building methods. For example, we can use vue-cli scaffolding to automatically generate the base directory file of the vue project. Of course, we can also customize the build from scratch.

vue-cli build

If you use vue-cli scaffolding to build a vue project, then you only need to type the following 5 lines of commands to generate a simple vue project (prerequisite is to install node .js):

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

This construction method is not suitable for all projects. Many files may not be used in your project, and if you know nothing about the automatically generated files, it will be very difficult to maintain them later. Therefore, it is not recommended for novices to use vue-cli to build. Instead, it is recommended that everyone build a vue project from scratch by referring to the files generated by vue-cli.

Custom build

Compared with vue-cli build, custom build is much more flexible, but it requires you to understand the steps and principles of construction, and the requirements are accordingly increased. The custom build is divided into the following steps:

File/folder creation

package.json file creation

webpack configuration file creation

Entry file creation

Vue component writing

Routing configuration

package.json file

Using the following command, we can quickly create a package.json file:

npm init -y

Then modify its scripts configuration items, add packaging and compression commands, and add dependencies and add corresponding project dependencies.

webpack configuration file

Secondly we need to create our webpack configuration file. The difference here from building other projects is that the vue single file component needs to be loaded using the vue-loader loader. At the same time, use babel-loader converts ES6 syntax

Entry file

Here we need to write the entry.js of the entry file address configured in webpack. The main function is to mount the generated vue instance app to the DOM node with the ID of app

Then we need to write the final Simple vue component index.vue, place it in the views folder

This article mainly introduces two ways to build vue projects, vue-cli build and custom build have their applicable scope and objects , everyone needs to make the best choice based on the project and their own conditions. At the same time, there are many functional configurations in the custom build that are not mentioned in this article. Interested children's shoes can continue to explore on their own.

The above is the detailed content of Vue project construction and practical example tutorial. For more information, please follow other related articles on the PHP Chinese website!