Vue--HelloWorld实现原理

HelloWorld项目的搭建详细步骤请看：Vue安装搭建点这里

首先，最终的界面是有两个部分组成的，一个是logo图片、一个是helloworld

大家可能有很多问题：比如我们在HelloWorld 中只写了helloworld，图片哪里来的呢？这两个怎么组合在一起的？。。。。

下面我们来了解一下src中其他的文件，心中疑惑自然会解除：

1.App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

当你看到app.vue的template的时候相信你已经知道图片是从什么地方来的了，那么<router-view/>是什么呢？不妨猜猜看，相信小伙伴已经猜的七七八八了，继续看吧。

<script>
export default {
  name: 'App'
}
</script>

script里面写了export default 定义了一个name，这个函数的作用就是定义了其他文件import这个文件的时候的名称，在下面就会看到，别急别急。

css就不用说了吧。

import Vue from 'vue'
import App from './App'
import router from './router'

铛铛铛铛，看没看到 import App from './App' 从./App中导入 App 那么这个App在哪里定义的呢，没错就是App.vue中的

export default {
  name: 'App'
}

接下来：

Vue.config.productionTip = false

这句代码是用来关闭生成生产模式的提示

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这段代码是重中之重，在这里创建了Vue的实例，

el是element的缩写 ‘#app’和常规用法一样是取得id=app的元素，对应的就是app.vue的div。

router 就是./router下面index.js文件

components指定了页面组成的文件

template是使用的模版

配置好了main.js实际上主页面就已经成型了，helloworld如何和logo图片在一起就需要了解下面的router了。

其他代码相信大家都能看懂，直奔主题吧：

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

这段代码就是实现app.vue和helloworld.vue的template合二为一的关键！

在这个路由中，export default new Router 定义了新路由，

path：‘/’路径

name: 'HelloWorld' ,定义了路由的名字

component 定义了路由的组件

还记得App.vue中的：

<router-view/>

这句话，就是通过main.js和路由交互，将helloworld植入到了App的template中，然后main.vue展示了App的id='app'的div。

故实现了最终效果！