2.4

目录

文件目录框架

代码框架——Name.vue

文件目录框架
目录/文件

说明

build

项目构建(webpack)相关代码

config

配置目录，包括端口号等。我们初学可以使用默认的。

node_modules

npm 加载的项目依赖模块

src

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

assets: 放置一些图片，如logo等。

components: 目录里面放了一个组件文件，主要的代码放置

App.vue: 项目入口文件，可以直接将组件写这里，但是推荐使用 components 目录，可以在里面新建不同组件文件

main.js: 项目的核心文件。

static

静态资源目录，如图片、字体等。

test

初始测试目录，可删除

.xxxx文件

这些是一些配置文件，包括语法配置，git配置等。

index.html

首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json

项目配置文件。

README.md

项目的说明文档，markdown 格式

代码框架——Name.vue
首先看成双成对的<></>，最靠前的就以下三个内容

内容

说明

template模板

布局整个web页面的所需要的模块，比如定义网页中的标签，文字，图片，表格，第三方插件如百度地图等等做定义

script 脚本

对上面定义的数据在data中做初始化，在created()等函数中做实时动态响应

style 样式

对template中定义的标签，文字，图片等大小，颜色，位置进行设置，这块也可以不写，写在template中，但是会使得其代码冗长，所以进行了分类出来，单独一块写，类似于css

<template>
<div id="Name">
</div>
</template>

<script>
export default {
data() {
return {
};
},
created() {
}
mounted() {
},
methods: {
},
};
</script>

<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#Name{
height: 100%;
}
</style>