vue3.x 目录结构详解

vue3.x 目录结构详解

该文章转自博客园的清和时光;原文地址:vue3.x 目录结构详解
以下是刚创建的vue3.x 项目的目录
vue3目录结构示例
我们来解释一下这些目录都是用来干嘛的

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录,编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录,比如logo.pn就放在这里
---|components       -- Vue的组件文件,自定义的组件都会放到这
---|router           -- vue-router vue路由的配置文件,
---|store            -- 存放 vuex 为vue专门开发的状态管理器,
---|views            -- 存放视图文件,
---|App.vue          -- 根组件,这个在Vue2中也有
---|main.ts          -- 入口文件,因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件),因为.vue结尾的文件在ts中不认可,所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件,作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件,不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件,使用markdown语法进行编写
|-vue.config.json    -- 请求代理, webpack 配置, 打包输出等都会在这里配置
|-yarn.lock          -- 使用yarn后自动生成的文件,由Yarn管理,安装yarn包时的重要信息存储到yarn.lock文件中


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用和引用[2]提供了关于vue.config.js配置的详细介绍和示例代码。vue.config.js是一个用于配置Vue项目的文件,主要用于修改Webpack的配置和其他一些项目设置。在这个文件中,你可以设置诸如webpack配置、打包输出路径、静态资源路径、是否生成源映射等等。为了更好地理解vue.config.js的配置,我会分步骤来介绍一些常用的配置选项。 首先,我们可以使用configureWebpack选项来修改Webpack的配置。比如,要在生产环境中修改配置,可以通过设置config.mode为'production'来指定模式。而config.performance则可以用来设置打包文件的大小限制。引用中的代码示例展示了如何进行这样的配置。 其次,我们还可以使用chainWebpack选项来链式操作Webpack的配置。在这里,你可以通过config.resolve.alias来设置路径别名,以方便你在项目中引用模块。比如,可以使用.set('@', resolve('src'))来将'@'设置为指向'src'目录的别名。 另外,如果你想对打包后的文件进行压缩,你可以使用CompressionWebpackPlugin插件。引用中的代码示例展示了如何在vue.config.js中引用该插件,并使用它进行压缩。 综上所述,vue.config.js提供了丰富的配置选项,可以让你对Vue项目进行灵活的配置和定制。你可以根据项目需求来设置不同的选项,以满足你的开发和生产需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值