看懂vue的入口文件

Posted 2021-01-03 wlhappy92

1.index文件

 <div id="app"></div>

2.main文件,也是入口文件

import Vue from ‘vue‘;
import App from ‘./App‘;
import router from ‘./router‘;

Vue.config.productionTip = false;
new Vue({
  el: ‘#app‘,
  router,   //相当于router: router,相同的省略了es6新语法
  render: h => h(App),
});

//1.路由根据网址不同,访问的内容不同
//2.router,相当于 router: router,你引入了router他自动会帮你引入router下面的index.js文件

3.app文件,这个引用了路由

<template>
  <div id="app">
  	<!--<router-view/>显示的是当前路由地址所对应的内容-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: ‘App‘,
};
</script>

<style>

</style>

4.router->index.js

import Vue from ‘vue‘;
import Router from ‘vue-router‘;
import HelloWorld from ‘@/components/HelloWorld‘;

//[email protected]相当于src目录
//2.当用户访问根路径的时候给用户访问的是HelloWorld

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld,
    },
  ],
});

5.components->HelloWorld.vue,这就是页面输出的内容hello world

<template>
  <div>
  	hello world
  </div>
</template>

<script>
export default {
 
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>