[原创] 一步一步走近Vue(二)

js vue

2017-02-25 1574

接上一篇.下面详细介绍一下我们的src源代码目录

src目录

src目录


assets/   # 资源文件夹,可以放置图片,样式文件等
components/   # 组件文件夹,自己写的一些页面文件放置在此文件夹
router/   # 路由配置文件夹
App.vue # 主页面的组件
main.js   # 项目的入口js文件夹

main.js文件

代码中通过new Vue创建了一个实例.指定把此实例绑定在id="app"的html节点上,此html标签在index.html文件中可以看到.


import Vue from 'vue' //引入vue模块,不指定路径的情况下默认从node_modules目录中引用
import App from './App' //引入App.vue
import router from './router' //引入路由文件在router/index.js

/* eslint-disable no-new */
new Vue({
  el: '#app', //绑定的html节点(元素选择器)
  router, //绑定路由 简写形式 相当于 router:router
  template: '<App/>', //使用指定的模版(组件)渲染在页面节点上
  components: { App } //定义页面中可以使用的模版
})


App.vue文件

代码分为三部分(不免让我又想到了mxml文件)
1. template为html代码,即页面上我们显示的html内容.此处需要注意,Vue.js有一个要求就是自定义组件必须有一个根节点,所以我们的template节点中的html最外层需要一个html标签进行包括
2. script为js代码,因为使用了babel插件建议使用es6的风格进行编码
3. style为css代码,样式文件

因为我们使用了vue-router插件,所以我们创建的模版代码中有一个router-view节点,以后我们路由切换后的渲染内容都会在此节点中。可以看到,此页面只有一个img标签,它最终展示的内容是在router/index.js文件中进行配置的

App.vue

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

<script>
export default {
  name: 'app'
}
</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>


router/index.js 路由配置文件

使用vue-router模块后的路由配置文件,此文件现在只指定了一个根路径.打开页面的时候把Hello.vue文件中的内容渲染在App.vue中的router-view节点中.


import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'

Vue.use(Router)

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