Vue 学习笔记02 —— my-project 示例项目分析

通过 Vue 学习笔记01 —— 开发环境搭建 我们创建了一个 my-project。我们需要对项目的结构进行了解才能更好的进行 vue 项目的开发。
项目结构

Snip20171206_5.png

1. 项目结构分析

1. index.html

   

   Snip20171206_6.png

2. main.js

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   // 导入 vue.js 库
   import Vue from 'vue'
   // 导入 App.vue 文件（组件）
   // 一个 .vue 就是一个组件
   import App from './App'
   // 导入路由配置
   // 路由主要负责是单页面的跳转
   import router from './router'
   
   // 配置提示
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     //  挂载的元素节点 （vue 对象会被挂载的是id === app 的元素上）
     el: '#app',
     // 使用路由
     // router = router, 这个和下面的代码是等价的
     router,
     // 模板
     // 模板的内容会替换挂载的元素
     // 
    === 
     template: '',
     // 注册组件
     // 注册组件后，就可以在模板中使用  组件
     // 注册的组件只能使用在模板中
     components: { App }
   })
   

3. app.vue

4. 路由
   router/index.js
   路由主要在单页面应用用进行界面跳转的。

   // 导入 vue.js
   import Vue from 'vue'
   
   // 导入 vue-router.js
   import Router from 'vue-router'
   
   // 导入 helloworld.vue 组件
   import HelloWorld from '@/components/HelloWorld'
   
   // 启用路由
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         // 路由路径
         // http://localhost:8080/# 路径访问的是 hellowrold 界面
         path: '/',
         // 路由名称
         name: 'Hello',
         // 注册 helloworld 组件
         component: HelloWorld
       }
     ]
   })
   

2. 项目架构

1. 加载过程

   

   Snip20171206_10.png

2. 页面渲染结果

   

   Snip20171206_12.png