Detailed explanation of using vue-cli scaffolding to initialize the project structure under the Vue project

This article mainly introduces the detailed explanation of the project structure of using vue-cli scaffolding to initialize the Vue project. Now I will share it with you and give you a reference.

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 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. The instance defined in main.js will be mounted 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

100db36a723c770d327fc0aef2ce13b1 or 6c04bd5ca3fcae76e30b72ad730ca86d superior.

[main.js]

is the entry file of the Vue application, used to create a new Vue instance and This instance is mounted under the root node and can also be used to introduce the Vue plug-in

'el' option: Provide a DOM element that already exists on the page as a Vue instance The mounting target, here is the node with id 'app' in index.html

'router' option: Inject the router instance into the Vue root instance so that each of its sub-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

d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2 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)

3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0Usually written in es6, use export default to export

c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 The style in it affects the whole world by default. If you need to define the scope, just To work under this component, you need to add scoped to the label, 30e8033e360bcffb1ce9b4703e10b64c531ac245ce3e4fe3d50054a55f265927

[router/index.js]

route The configuration file is used to map components to routes so that you can know where to render them

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solve the problem that Vue changes the array through the following table and the page does not render

vue2.0 axios cross-domain merge Rendering problem solution

Layui select option overlay problem solution

The above is the detailed content of Detailed explanation of using vue-cli scaffolding to initialize the project structure under the Vue project. For more information, please follow other related articles on the PHP Chinese website!