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

作者: Laughingg | 来源:发表于2017-11-10 12:53 被阅读38次

Vue 学习笔记02 —— my-project 示例项目分析
vue-cli构建项目
安装vue脚手架3.0以上版本
vue-web工程搭建
vue init webpack my-project指令时报错
Vuejs+Vuex+TypeScript开发项目
vue使用错误归纳
vue-cli初始化项目时报端口错误
electron-vue发布(笔记)
vue-cli@3初始化的vue项目之webpack配置

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

Snip20171206_5.png

1. 项目结构分析

index.html

Snip20171206_6.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-project</title>
  </head>
  <body>
    <!--
    查看 main.js 源码可知 app.vue  会挂载到 index.html 的 <div id="app"></div>
    app.vue 中的所有内容都会显示到 <div id="app"></div> 中
    -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 编译的文件将会自动注入 -->
  </body>
</html>

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,
  // 模板
  // 模板的内容会替换挂载的元素
  // <div id="app"></div> === <App><App/>
  template: '<App/>',
  // 注册组件
  // 注册组件后，就可以在模板中使用 <App></App> 组件
  // 注册的组件只能使用在模板中
  components: { App }
})

app.vue

<template>
  <div id="app">
    <!-- 公共元素（路由切换后还会存在的元素, 可以通过后面的示例加深理解）-->
    <img src="./assets/logo.png">
    <!-- 渲染路由视图： helloworld.vue 组件就渲染在 router-view 视图中 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
  // 下面的是由 webpack 完成的。 默认情况下不需要写。 
  // template: template
}
</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.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
    }
  ]
})