How to use vue-cli scaffolding initialization

This time I will show you how to use vue-cli scaffolding initialization, what are the precautions when using vue-cli scaffolding, the following is a practical case, let's take a look.

vue-cli is an official command line tool provided by Vue, which can be used to quickly build large-scale single-page applications. The tool provides out-of-the-box build tool configuration, bringing a modern front-end development process. It only takes a few minutes to create and launch a project with hot reload, static checks on save, and a production-ready build configuration.

Using vue-cli has the following major advantages:

1. vue-cli is a mature Vue project architecture design that will be updated as the Vue version changes

2. vue-cli provides a set of local hot-loading test servers

3. vue-cli integrates a set of packaging and online solutions, which can Use build tools such as webpack or Browserify

##Install

To install vue-cli

# 必须全局安装vue-cli，否则无法使用vue命令
# 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息
$ npm install -g vue-cli
$ vue -V

Create the project

Next use vue-cli to create a new Vue project

# 项目创建完之后需要执行npm install安装依赖
$ vue init webpack vuedemo
$ npm install

The files contained in the created vuedemo folder are as follows:

[index.html]

index.html is the same as other html files, but generally only an empty root node is defined, and the instance defined in main.js will be hung Loaded under the root node, the content is filled through vue components. Since all mounting elements will be replaced by the DOM generated by Vue, it is not recommended to directly mount the instance to

or on.

[main.js]

is the

entry file of the Vue application, used to create a new Vue instance, and mount this instance under the root node. It can also be used to introduce the Vue plug-in

'el' option: Provide an existing one on the page The DOM element is used as the mounting target of the Vue instance. Here is the node with the id 'app' in index.html

'router' option: Inject the router instance into the Vue root instance so that each of its children Components can access $router (router instance) and $route (currently activated routing information object)

'template' option: use a string template as the identifier of the Vue instance

' components': root component

[App.vue]

The root component of the project can contain other sub-components to form a component tree

can only contain one child node, which means that there can only be one top-level p (as shown in the figure, the p element with the id of 'app' has no sibling nodes )

<script></script>Usually written in es6, use export default to export

The styles in the default affect the whole world. If you want to define a scope that only works under this component, you need to add scoped to the label,

[router/index.js]

Routing

Configuration file, the function is to map components to routes, so that you can know where to render them

I believe you will read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to update the array with $set in vue.js

How to split code based on webpack

The above is the detailed content of How to use vue-cli scaffolding initialization. For more information, please follow other related articles on the PHP Chinese website!