Vue项目详细结构

build

  ---index.js  webpack配置文件【很少修改这个文件】

mock

  ---mock数据的文件夹 模拟一些假的数据mock.js实现的,因为实际开发的时候,利用的是真实接口

node_modules

  ---项目依赖的模块

public

  ---ico图标,静态页面 public文件夹里面经常放置一些静态资源,而且在项目打包的时候webpack不会编译这个文件夹,原封不动的打包到dist文件夹里面

src

  ---程序员源代码的地方
  ---api文件夹:涉及请求相关的
  ---assets文件夹:里面放置一些静态资源(一般共享的),放在assets文件夹里面静态资源,在webpack打包的时候,会进行编译
  ---components文件夹:一般放置非路由组件或者全局组件
  ---icons文件夹:放置了一些svg矢量图
  ---router文件夹:与路由相关的
  ---store文件夹:一定是与vuex相关的
  ---style文件夹:与样式相关的
  ---utils文件夹:request.js是axios二次封装文件
  ---views文件夹:里面放置的是路由组件
  ---App.vue:根组件
  ---main.js:入口文件
  ---permission.js:与导航守卫相关
  ---settings:项目的配置项文件

.env.development
.env.production
.env.staging:process.env拿到开发环境

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个基于 MVVM 模式的前端框架,它提供了一些基础的目录结构,方便我们进行项目开发。下面是一个常见的 Vue 项目目录结构: ``` ├── build // 构建相关 ├── public // 静态资源 │ ├── favicon.ico // 网站图标 │ └── index.html // 入口 HTML 文件 ├── src // 源代码 │ ├── assets // 资源文件(图片、样式等) │ ├── components // 组件 │ ├── router // 路由 │ ├── store // 状态管理 │ ├── views // 页面视图 │ ├── App.vue // Vue 根组件 │ └── main.js // 入口 JS 文件 ├── static // 静态资源 ├── .babelrc // Babel 配置文件 ├── .editorconfig // 编辑器配置 ├── .eslintignore // ESLint 忽略配置 ├── .eslintrc.js // ESLint 配置文件 ├── .gitignore // Git 忽略配置 ├── package.json // 项目依赖及配置 └── README.md // 项目说明 ``` 上述目录结构主要包含以下几个部分: - build:存放构建相关的配置文件,如 webpack 的配置文件等。 - public:存放静态资源,如网站图标、入口 HTML 文件等。 - src:存放源代码,包括资源文件、组件、路由、状态管理、页面视图、入口 JS 文件等。 - static:存放静态资源,如图片、字体等。 - .babelrc:Babel 配置文件。 - .editorconfig:定义代码风格的配置文件,会被大多数编辑器识别。 - .eslintignore:ESLint 忽略配置。 - .eslintrc.js:ESLint 配置文件。 - .gitignore:Git 忽略配置。 - package.json:项目依赖及配置。 - README.md:项目说明。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值