vue学习笔记（三）——目录结构介绍
1.初始目录结构如下：
2.目录结构介绍
| 目录/文件 | 说明 |
|---|---|
| build | 最终发布的代码存放位置。 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| 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学习笔记（三）——目录结构介绍的更多相关文章
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- thinkphp学习笔记1—目录结构和命名规则
原文:thinkphp学习笔记1-目录结构和命名规则 最近开始学习thinkphp,在下不才,很多的问题看不明白所以想拿出来,恕我大胆发在首页上,希望看到的人能为我答疑解惑,这样大家有个互动,学起来快 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Solr6.7 学习笔记(01) -- 目录结构
Solr解压后的目录结构 --contrib: Solr的一些扩展 --analysis-extras: 包含一些文本分析组件及其依赖 --clustering: 包含一个用于集群搜索结果的引擎 -- ...
- Vue学习笔记三：v-bind，v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- python学习笔记：目录结构
"项目目录结构"其实也是属于"可读性和可维护性"的范畴. 目录组织方式 关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结构.在Sta ...
- Linux Shell 学习笔记 一 目录结构
以Red Hat Enterprise Linux 各版本为例,RHEL中目录具体作用如下, /bin 存放普通用户使用的命令 /sbin 存放管理员可以执行的命令 /home ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- vue学习笔记(三)：vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- Angular5学习笔记 - 项目目录结构（二）
一.项目总体目录 README.md:项目的说明和一些常用指令说明,建议看看. e2e:看不懂暂时空着??? node_modules/:存放npm下载的组件(npm install 后自动产生,不需 ...
随机推荐
- js 类数组arguments详解
arguments并不是一个真正的数组,而是一个"类似数组(array-like)"的对象: 就像下面的这段输出,就是典型的类数组对象: [, , callee: ƒ, Symbo ...
- js 对象的值传递
一.变量赋值的不同 1.原始值 在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的. 2.引用值: 在将一个保存着对象内存地址的变量复制给另一个变量 ...
- winform展示Unity3D文件（支持动态改变文件路径）
winform下展示Unity3D文件可以支持对Unity3D实现的模块进行包装,以及在其他的项目中需要展示Unity3D的界面时候,恰到适宜地进行打开展示,这里我展示如何使用winform打开Uni ...
- FFmpeg AVPacket
AVPacket注解 AVPacket 是一个结构体,存储压缩数据.可作为编码器的输出,解码器的输入. 对于 Video 一般包含一个压缩帧,对于 Audio 可能包含多个压缩帧. 编码器允许输出空 ...
- Spring入门之IOC
IOC/DI: Spring最核心的灵魂,IOC/DI(控制反转/依赖注入)!,这里一定要理解他,理解这个思想.我会细说什么是IOC/DI.他的思想是什么.它带来了那些好处. 进入正题,先说说什么是i ...
- vmvare centos 7.0 root密码忘记后重置及总结
今天遇到了一个比较尴尬的事情,我centos 7.0的虚拟机密码忘了.....里面还有我配置好的环境呢.于是我就上网上搜索各种方法,最后经我验证下面这个方法比较靠谱: 使用光盘修复Centos: ht ...
- C# 读取系统日志
.NET框架类库提供了EventLog类和EventLogEntry类与系统日志进行交互二者属于System.Diagnostics命名空间 EventLog 类的属性主要有 Entris返回一个Ev ...
- PHP正在进行时-字符串动态插入变量
在PHP中,一般用双引号或者单引号将字符串括起来. echo "张三李四王五叫上赵六一起去'喝酒'". 如果要动态将将数据插入到字符串中,我们除了使用.号拼接,还可以通过使用{}来 ...
- 云服务器 远程mysql 无法连接
问题:mysql不管是用免安装版的,还是用直接安装的,还是用phpStudy直接发布的mysql服务.都只能用localhost登录,不能用服务器的ip进行远程访问 遇到这个问题.按照网上大家介绍的方 ...
- 【C#】发票助手二维码生成
之前一起吃饭听说了发票助手这个东西,可以生成发票抬头的二维码,扫码就可以开票了. 官方也有个小程序的 [税务发票助手],微信中搜这个名字就可以了. 我准备在自己的小程序中也尝试一下,本来觉得只要拼接一 ...