vue脚手架结构目录文件

本文解析了vue cli 3创建的项目结构,包括node_modules、public、src等目录的作用,以及关键配置文件如.browserslistrc、.editorconfig、babel.config.js、vue.config.js的功能。此外,还提及了eslint、prettierrc和webpack.config.js在项目中的作用,以及dist目录作为打包输出的目标位置。
摘要由CSDN通过智能技术生成

vue cli 3 脚手架生成的文件解析:

  1. node_modules:npm install安装的依赖代码库
  2. public:存放不会变动的静态文件,它与src/assets的区别在于,文件不会被webpack打包处理
    favicon.ico 在浏览器上显示的图标
    index.html 主页面文件
  3. src:存放源码,我们开发的所有代码都放在src目录下
    api 存放功用或常用的api
    assets 存放组件中的静态资源
    components 存放一些公共的组件
    plugins 项目所用的插件
    router 路由,实现页面的跳转
    vuex 状态管理
    utilts 项目所用的公共方法
    views 存放所有的路由组件
    app.vue 应用根组件
    main.js 应用入口的js
  4. .browserslistrc:设置浏览器的兼容
    >1%代表着全球超过1%人使用的浏览器
    last 2 versions 表示所有的浏览器兼容到最后两个版本
    not ie <= 8 表示IE浏览器版本大于8
    safari >= 7 表示safari浏览器版本大于等于7
  5. .gitignore:版本管制忽略的配置
  6. .editorconfig:编辑配置(注意: 在vscode中安装editorConfig for vs Code插件。.editorconfig才会起作用。)
    root = true 告诉EditorConfig插件,这是根文件,不用继续往上查找
    [*] 对所有文件都生效
    charset=utf-8 编码
    indent_style=space 缩进tabs键,可以改为空格space
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值