Pure small white start vue3.0 CLI

vue3.0 CLI really small white start full Tutorial series: www.cnblogs.com/ndos/category/1295752.html

My github address-vue3.0study-stage learning results are all branching out.

Enter the SRC folder, which is actually the project folder, other folders as well as files later in the understanding.

3 Folders Assets-a variety of static resource folders-such as pictures, CSS files and so on. Components-component folders, components are core concepts like the MVC framework such as Vue, and understand what they mean. View-Views folder.

5 Files App.vue, main.js-view, mate Main.js become the main entrance to the Vue program. Router.js-The main entry for the router. Store.js-routing state management System.

Registerserviceworker.js not to be understood at this stage.

After introduction of the project folder, enter the main focus of this article-components.

Both *.js and *.vue files can be components individually. I will not use a separate *.js file as a component (easy to understand and manage with the *.vue file as a component). Components can be written separately with *.vue, or they can be separated with *.vue and *.js to complete one or more components.

There are 4 components in the current project folder: App.vue + main.js, Helloworld.vue, Views/home.vue, Views/about.vue.

Template Tags : 4 components have, this is the rendering template, but also the core of the component, careful readers can find that the 4 templates contain a top-level div element. script Tags : Helloworld.vue and Views/home.vue, you can also use a separate JS file description, such as Main.js. style tags : in App.vue and Helloworld.vue, a CSS style that provides "component scope" prevents CSS style name collisions caused by team co-development.

Template-script-Quiz

1, why to use *.vue and *.js separate way to write components?

A: This initial project, naturally, is not necessary. In large projects, template templates and function definition script for some components are fairly large code, and separate management facilitates the consolidation of the project architecture.

2. Does the following describe the use of style?

A: Obviously not, the content is simple, the reader knows for themselves.

3. What is the difference between App.vue and script in other components?

A: This is a big difference! Script in App.vue is a centralized entry that defines the various functions, the routing, Routing state management System, rendering, and configuration definitions that are currently visible, so the script for the app components is generally defined separately. Since App.vue is the main program entry, it does not have anything in common with data, prop, and so on. About App.vue and main.js, will gradually deepen in later study.

Learning to transform Helloworld.vue

Export Default {name: ' HelloWorld ', props: {msg:string}}, this is the script code. Export default <object> in fact, this is very simple, an object instance is exported, and this obj has the name, props property. Name-component names; props-component properties (the values of these properties can only be provided by the parent component). Component properties are also objects of a health-value pair: Kin-attribute name, value-attribute type (this thing also has a bit of content, it is recommended to see the official description of the relevant introduction).

Helloworld.vue components are used in Views/home.vue, props and MSG are also passed in Views/home.vue (the Green Word section below):

Import HelloWorld from ' @/components/helloworld.vue ' Welcome to Your vue.js App"/> Only These are not yet able to use the Helloworld.vue component, but also require the green part of the following code: Export default {name: ' Home ', components : {HelloWorld} }.

Now use the Helloworld.vue test to learn about components.

v-forThe use

function () {return' github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-'" Babel ", Text:" Babel "" PWA ", Text:" PWA "" Eslint ", Text:" Eslint "" Unit-mocha ", Text:" Unit-mocha "" E2e-nightwatch ", Text:" E2e-nightwatch " }]}

The export configuration to the Helloworld.vue component adds the Data property (the Data property needs to be returned as a function because the component exists).

<ul> <li vfor = "(Cli,index) in CLIs": key= "index" > <a:href= linkprefix + cli.link target= "_bl Ank "rel=" Noopener ">{{cli.text}}</a> </li></ul>

The modified version has been uploaded to my github.