1.初始目录结构如下：

2.目录结构介绍

目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • commponents: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组建写这里，而不使用 commponents 目录。
  • main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

3.初始流程

　　1.index.html ---首页入口文件

其中 id 为 app 的 div 是页面容器，其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上。

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue Router Demo</title>

 </head>

 <body>

    <div id="app">

       <router-view></router-view>

     </div>

     <script src="dist/bundle.js"></script>

 </body>

 </html>　　

　　2.main.js ----核心文件

　　　　　　 此处的 el:'#app', 表示的是index中的那个 <div id="app"></div>, 它要被 App这个组件 components: { App } 的模板 template: '<App/>'替换。

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: { App }

})

　　3.App.vue ----项目入口文件

App这个组件 components: { App } 的模板 template: '<App/>' 的具体内容。其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上

<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>

　　4.router/index.js -----路由与组件　　　　

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

    }

  ]

})

vue学习笔记（三）——目录结构介绍的更多相关文章

  1. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  2. thinkphp学习笔记1—目录结构和命名规则

    原文:thinkphp学习笔记1-目录结构和命名规则 最近开始学习thinkphp,在下不才,很多的问题看不明白所以想拿出来,恕我大胆发在首页上,希望看到的人能为我答疑解惑,这样大家有个互动,学起来快 ...

  3. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  4. Solr6.7 学习笔记(01) -- 目录结构

    Solr解压后的目录结构 --contrib: Solr的一些扩展 --analysis-extras: 包含一些文本分析组件及其依赖 --clustering: 包含一个用于集群搜索结果的引擎 -- ...

  5. Vue学习笔记三：v-bind，v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  6. python学习笔记：目录结构

    "项目目录结构"其实也是属于"可读性和可维护性"的范畴. 目录组织方式 关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结构.在Sta ...

  7. Linux Shell 学习笔记 一 目录结构

    以Red Hat Enterprise Linux 各版本为例,RHEL中目录具体作用如下, /bin       存放普通用户使用的命令 /sbin     存放管理员可以执行的命令 /home   ...

  8. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  9. vue学习笔记(三)：vue-cli脚手架搭建

    一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli     ...

  10. Angular5学习笔记 - 项目目录结构（二）

    一.项目总体目录 README.md:项目的说明和一些常用指令说明,建议看看. e2e:看不懂暂时空着??? node_modules/:存放npm下载的组件(npm install 后自动产生,不需 ...

随机推荐

  1. Robot Framework学习笔记（十一）------ 分层设计

    以百度搜索为例,如果我们需要写5个不同关键字搜索的用例.如果没有分层的思想,那么我们需要写5个用例,并且每个用例都需要重复写打开浏览器.输入关键字.点击按钮.关闭浏览器的步骤.如果使用Robot Fr ...

  2. 【精选】Nginx模块Lua-Nginx-Module学习笔记（二）Lua指令详解(Directives)

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...

  3. 用 HAproxy 搭建 RabbitMQ 集群

    构建参考: [ Rabbitmq cluster setup with HAproxy ] [ python demo ] RabbitMQ Cluster 遇到的问题 python pika 作为c ...

  4. 为什么树莓派不会受到 Spectre 和 Meltdown 攻击

    最近爆出来的 Intel CPU 的底层漏洞可谓是影响巨大,过去20年的电脑都可能会受影响.前几天 Raspberry Pi 的官方 Twitter(@Raspberry_Pi) 转推了这篇文章,通过 ...

  5. 强化学习之Q-learning ^_^

    许久没有更新重新拾起,献于小白 这次介绍的是强化学习 Q-learning,Q-learning也是离线学习的一种 关于Q-learning的算法详情看 传送门 下文中我们会用openai gym来做 ...

  6. Unity3d 协程

    参考文章: http://blog.csdn.net/onafioo/article/details/48979939 http://www.cnblogs.com/zhaoqingqing/p/37 ...

  7. JavaScript（一）js简单介绍

    JavaScript JS历史简述: javascript 是 netscape 网景公司 的  布兰德·艾奇  研发的, 网景要求  布兰德·艾奇 10天开发出来一个与Java相似 但要比java简 ...

  8. 利用JParticles制作粒子

    JParticles 2.0发布,打造炫酷的粒子 一. 介绍 JParticles 2.0发布之前叫Particleground.js, 相信有在用的朋友应该不会陌生, 关于1.x的介绍可以看这里 二 ...

  9. js中常用的操作字符串的方法大全

    charCodeAt()返回一个整数,代表指定字符的Unicode编码 fromCharCode()从一些Unicode字符串得到一个字符串  charAt()根据指定下标位置返回对应字符,如果下标超 ...

  10. [已解决]IndentationError: unindent does not match any outer indentation level

    最近跟同事合作代码没有用git进行协同,很多代码拷贝后进行粘贴,常常报以上错误. 经过查询发现是空格跟tab混合使用了,重新将代码的缩进手动调整下就好了.