vue新建项目的目录结构设计,与分析意义

在这里插入图片描述
在这里插入图片描述
node_modules

vue 项目的文件依赖存放在这个文件夹。

public

存放页面图标和不支持 JavaScript 情况时的页面。

package.json

存放项目的依赖配置(比如 vuex,element-UI)。

babel.config.js

babel 转码器的配置文件。

vue.config.js

vue 的配置文件。

yarn.lock

用来构建依赖关系树。

.gitignore

git 忽略文件

src

存放 vue 项目的源代码。其文件夹下的各个文件(文件夹)分别为:

​assets​:资源文件,比如存放 css,图片等资源。

​component​:组件文件夹,用来存放 vue 的公共组件(注册于全局,在整个项目中通过关键词便可直接输出)。

​router​:用来存放 ​index.js​,这个 js 用来配置路由

​tool​:用来存放工具类 js,将 js 代码封装好放入这个文件夹可以全局调用(比如常见的​ api.js​,​http.js​ 是对 http 方法和 api 方法的封装)。

​views​:用来放主体页面,虽然和组件文件夹都是 vue 文件,但 views 下的 vue 文件是可以用来充当路由 view 的。

​main.js​:是项目的入口文件,作用是初始化 vue 实例,并引入所需要的插件。

​app.vue​:是项目的主组件,所有页面都是在该组件下进行切换的。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
一个典型的Vue 2项目目录结构如下所示: ``` ├── build/ # 构建相关的文件,一般不需要关注 ├── config/ # 配置相关的文件,一般不需要关注 ├── src/ # 源代码 │ ├── assets/ # 静态资源文件,如图片、字体等 │ ├── components/ # Vue组件 │ ├── router/ # 路由配置文件 │ ├── store/ # Vuex状态管理相关文件 │ ├── styles/ # 全局样式文件 │ ├── utils/ # 公用的工具函数 │ ├── views/ # 页面组件 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── static/ # 静态资源文件,如图片、字体等(不会被webpack处理) ├── tests/ # 测试相关的文件,一般不需要关注 ├── .babelrc # Babel配置文件 ├── .editorconfig # 编辑器配置文件,可根据个人喜好设置 ├── .gitignore # Git忽略配置文件 ├── index.html # 首页HTML文件 └── package.json # 项目配置文件 ``` 上述目录结构是一个基本的Vue 2项目的示例,可以根据实际需求进行调整和扩展。在这个目录结构中,主要的关注点是`src/`目录,其中包含了项目的源代码。`assets/`目录用于存放静态资源文件,如图片、字体等;`components/`目录用于存放Vue组件;`router/`目录用于存放路由配置文件;`store/`目录用于存放Vuex状态管理相关文件;`styles/`目录用于存放全局样式文件;`utils/`目录用于存放公用的工具函数;`views/`目录用于存放页面组件;`App.vue`是根组件;`main.js`是入口文件。 其他的目录和文件,在一般情况下,开发者可以不需要关注或修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zayyo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值