Vue文件框架+Vue代码框架

文件目录框架

目录/文件	说明
bulid	项目构建(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 格式

目录/文件	说明
node_modules	项目依赖包
public	页面入口index.html
src	源码目录 assets静态资源 图片 components组件目录 App.vue:项目入口文件 main:main入口文件，程序从这开始执行
.eslintrc.js	eslint代码检查
.gitignore	git忽略文件
babel.config.js	js相关配置文件
jsconfig.json	js相关配置文件
package-lock.json	项目库描述文件
package.json	项目库描述文件
README.md	项目的说明文档，markdown格式
vue.config.js	项目配置文件

代码框架

首先看成双成对的<></>，最靠前的就以下三个内容

内容	说明
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>