Vue3入门系列(二)目录结构认识

目录结构认识

      • npm包管理器目录结构认识
        • node_modules
        • public
        • src
          • asserts
          • components
          • App.vue
          • main.js
        • .browserslistrc
        • .eslintrc.js
        • .gitignore
        • babel.config.js
        • package.json
        • package-lock.json
      • vite目录结构介绍

npm包管理器目录结构认识

这是使用@vue/cli初始化的项目结构,
Vue3入门系列(二)目录结构认识_第1张图片

node_modules

这是安装node后用来存放用包管理工具下载安装的包的文件夹。通俗的说,项目中通过npm安装的依赖都在这里。

public

public中存放的是一些静态文件,默认有favicon.ico和index.html。

src

该文件夹下存放的是你的源码,如下图所示
Vue3入门系列(二)目录结构认识_第2张图片

asserts

存放的是静态文件,与public的区别是这里存放的是有可能会发生变化的文件,所以建议这里存放自己开发的js/css,public中引入外部的js/css。

components

组件目录,自己封装的vue组件可放在该目录下。

App.vue

相当于页面的入口文件,项目启动后会默认将该文件当做首页。
Vue3入门系列(二)目录结构认识_第3张图片
Vue的三个非常标准的一个结构,分别是template、script和style,看名字也可以大概了解他们的作用。

template:这是用来写html木板的,包括第三方的、自己开发的组件,都可在里边使用,vue3之前只能有一个根元素,但是在vue3中是可以出现多个根元素的,如上图所示。
script:编写js的地方,在里边处理各种的业务逻辑,生命周期处理,导入组件等
style:编写css的地方
main.js

初始化vue实例并使用需要的插件,将内容渲染到主页面上,项目的入口文件。(引入插件后期会提到)

.browserslistrc

这个文件是为了配置兼容浏览器,一般不需要修改

.eslintrc.js

EsLint的配置文件,代码检查与格式化可在该文件中配置。

.gitignore

这是提交代码时忽略其中配置的文件与文件夹。

babel.config.js

这是babel的配置文件,通常来说也是不需要更改的。

package.json

项目启动方式,依赖管理,开发环境依赖配置的地方
Vue3入门系列(二)目录结构认识_第4张图片
这里就是三个命令npm run serve npm run build npm run lint,从上往下分别是:启动、打包和检查的命令,当然也可以自定义。
Vue3入门系列(二)目录结构认识_第5张图片
这是项目的依赖,因为是刚下载的,所以这里还什么都没有,如果加入了Router或着Vuex,那对应的依赖会在这里出现
Vue3入门系列(二)目录结构认识_第6张图片
这里是开发依赖,只作用与开发环境,而dependencies是需要发布到生产环境中的。

package-lock.json

记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。

vite目录结构介绍

Vue3入门系列(二)目录结构认识_第7张图片
可以发现vite与npm创建的脚手架项目大同小异,vite项目的index.html是在根目录的,在根目录的原因是vite启动的时候会将自己当做一个开发服务器;然后多了一个vite.config.js的文件,其实这个文件与vue.config.js这个文件作用是一样的,都是配置项目运行、打包、代理等的一些配置。具体可参考官方文档。

如果觉得不够清晰可查看我转载的一篇文章vue3.x 目录结构详解,里边对每个目录都有说明。

如果发现错误请在评论区指正,谢谢

你可能感兴趣的:(Vue3,vue.js,javascript,前端)