Vue2.0: (iii), project start, Home Introduction (Main.js,app.vue,importfrom)

Next, you need to operate on main.js App.vue and so on.

But there is a problem: what is main.js, and what does he do with it? What is App.vue for? What's the import from Main.js? What does Newvue ({}) do? What parameters do you need inside, and what does it do? Searched a blog post on the internet to answer some of the initial puzzles.

　　What is Main.js? What is the content in general?

1. The main.js Program entry file is the initialization of the Vue instance and the use of the required plugins to load various common components.

import vue from the ' Vue ' import App from './app '/* eslint-disable no-new */new Vue ({  el: ' #app ',  Template: ' c6><app/>', components  : {App}}

　　　What does 2.import from do?

In fact, Importfrom is inside the ES6 syntax. Because of a lot of relevant knowledge, specifically see the blog ES6 inside the Import,export.

　　　　Here is just to give you a brief introduction of its usefulness here.

A.

Import vue from ' Vue ';

In fact, the most complete wording is:

　　　　　　　　　　　　　　

Import Vue from ". /node_modules/vue/dist/vue.js ";

This means: Because Main.js is in the src file, so. /forward-level relative to the directory to find Node_modules, and then look for later files.

B.

Import App from './app ';

In fact, the most complete wording is:

Import App from './app.vue ';

The idea is to introduce the. vue file that we wrote.

C. There can also be

　　　　import router from ‘./route‘;    ---------      import router from ‘./route.js‘;

      import axios from ‘axios‘;     --------      import axios from ‘..\node_modules\axios\dist\axios.js‘;

　　　import ‘./less/index‘;      --------      import ‘./less/index.less‘;

　小结：在简书上看到有一个人总结的很好：

　　　　　　 1.import...from ... The from command can be followed by a number of path formats, if only the package name of Vue,axios is given, it will be automatically loaded into the node_modules, if the relative path and file prefix, to the specified location to find.
2. You can load a wide variety of files:. js,. Vue,. Less, and more.
3. You can omit the from direct introduction. The following is attached to the author's original:
While you're still young, 233.
Links: https://www.jianshu.com/p/c0be35475e54
Source: Pinterest

　　Second, what is the use of App.vue?

　　　　App.vue is our main component, the page entry file , and all the pages are switched under App.vue. is also the key to the entire project, App.vue is responsible for building definitions and page component imputation.

<Template>  <DivID= "App">    <imgsrc= "./assets/logo.png">    <Hello></Hello>  </Div></Template><Script>Import Hello from'./components/hello'Exportdefault{name:'app', components: {Hello}}</Script><style>#app{font-family:' Avenir ', Helvetica, Arial, Sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:Grayscale;text-align:Center;Color:#2c3e50;Margin-top:60px;}</style>

Third, what is router index.js?

　　　　　　Router Index.js to register the ready routing component in the route:

Import vue from ' Vue ' import Router from ' vue-router ' import recommed from ' components/recommend/recommend ' Import Singer fr Om ' components/singer/singer ' import Rank from ' Components/rank/rank ' import Search from ' Components/search/search ' Vue.use (Router) export default new Router ({  routes: [    {      path: '/',      component:recommed    },    {      path: '/recommend ',      component:recommed    },    {      path: '/singer ',      component:singer    }    {      path: '/rank ',      component:rank    },    {      path: '/search ',      component:search    }  ]})

Here are some other files that mean:

1. Index.html File entry

2. SRC placing components and portal files

3. Node_modules for dependent modules

4. The path port value is configured in config, etc.

5. Build is configured with Webpack basic configuration, development environment configuration, production environment configuration, etc.

Vue2.0: (iii), project start, Home Introduction (Main.js,app.vue,importfrom)