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


 

 

你可能感兴趣的:(VUE,vue.js,前端,javascript)