Home > Developer > JavaScript
Use vue-cli scaffolding to initialize the project structure under the Vue project, vue-clivue
Vue-cli is an official command line tool provided by Vue. It can be used to quickly build large-scale single-page applications. This tool provides out-of-the-box build tool configuration, bringing about a modern front-end development process. You can create and start a project with hot loads, static checks during storage, and build configurations that can be used in the production environment in just a few minutes.
Vue-cli has the following advantages:
Install
Install vue-cli
# Vue-cli must be installed globally, otherwise, you cannot use the vue command # Use vue-V to check whether vue-cli is successfully installed and the version information after installation is complete. $ npm install-g vue-cli $ vue-V
Create a project
Next, use vue-cli to create a new Vue project.
# After the project is created, run npm install to install the dependency $ vue init webpack vuedemo $ npm install
The created vuedemo folder contains the following files:
[Index.html]
Index.html is the same as other html files, but generally only defines an empty root node. the instances defined in js will be mounted under the root node and the content will be filled by the vue component. Because all the Mount elements will be replaced by the DOM generated by the Vue, it is not recommended to directly mount the instanceOr<body>.
[Main. js]
Is the entry file of the Vue application. It is used to create a new Vue instance and mount the instance to the root node. It can also be used to introduce the Vue plug-in.
'El' option: specify a dommetadata that already exists on the page as the target of vuegion. In this example, the node with the id of 'app' in index.html is located.
'Router 'option: inject a router instance into the Vue root instance so that each of its sub-components can access $ router instance) and $ route (the currently activated route 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 child components to form the component tree.
<Template> </template> only one subnode can be contained, that is, only one div on the top layer can be contained (the div element with the id of 'app' has no sibling node)
<Script> </script> is usually written in es6 and exported using export default.
The style in <style> </style> affects the global effect by default. To define the scope to work only under this component, you must add scoped to the label. <style scoped> </style>
[Router/index. js]
The routing configuration file maps components to routes to help you know where to render them.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
