Vue结构目录的了解

本文详细介绍了Vue项目的目录结构,包括src、static、.xxxx文件、index.html、package.json等关键部分的作用。讲解了App.vue作为项目入口文件、main.js作为核心文件的角色,以及.vue文件的template、script和style部分。还提到了router和API的使用,以及Webpack的模块打包功能。
摘要由CSDN通过智能技术生成

使用 IDE 打开该目录,结构如下所示

目录结构:

build

项目构建(webpack)相关代码。

webpack

模块打包器,它可以将模块打包成符合生产环境部署的前端资源。

config需要进行相关的配置,包括端口号等。一般是默认的。
node_modules加载的项目依赖模块。
src项目源码目录(开发都在这里进行)。
components目录里面放了一个组件文件。
App.vue

项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

main.js项目的核心文件。
static静态资源目录,如图片、字体等。
.xxxx文件

属于配置文件,如语法配置,git配置。

index.html首页入口文件。
package.json

项目配置文件。

README.md

项目的说明文档,markdown 格式

api:连接后端接口

router其实就是指向的意思

.vue文件自定义的文件类型,用类似HTML的语法描述一个Vue组件。

每个.vue文件包含三种类型的顶级语言块 <template>, <script> <style>。这三个部分分别代表了 html,js,css

template 部分

一个 vue 组件, template 则代表它的 html 结构,见图知义。注意:我们不是说把代码包裹在 <template></template> 中就可以了,而是必须在里面方置一个 html 标签来包裹所有的代码。如下,使用了 <div></div>标签。

script 部分

引用的文件

我们将所有的代码包裹于如下的代码中间:

 style 部分

对我们的 template 里内容出现的 html 元素写一些样式。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值