VUE3 学习笔记（四）——目录介绍

二、目录介绍

　　编辑工具可以使用VSCode或者HBuilderX

一、Vue3目录

1、目录介绍：

\my-vue-project
│  .gitignore
│  index.html  ：首页入口文件
│  package-lock.json  ：锁定安装时的包的版本号，使所有人的npm install安装的依赖版本一致
│  package.json   ：项目配置文件
│  README.md
│  vite.config.js  ：Vite 配置；Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！
│
├─node_modules  ：npm 加载的项目依赖模块
│
├─public
│      favicon.ico  ：一个静态文件
│
└─src  ：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
    │  App.vue  ：项目入口文件
    │  main.js    ：项目的全局配置文件
    │
    ├─assets   ：放置一些图片和logo
    │      base.css
    │      logo.svg
    │      main.css
    │
    └─components  ：目录里面放了演示组件，我们开发的Vue主要放在这里
        │  HelloWorld.vue
        │  TheWelcome.vue
        │  WelcomeItem.vue
        │
        └─icons
                IconCommunity.vue
                IconDocumentation.vue
                IconEcosystem.vue
                IconSupport.vue
                IconTooling.vue

2、VCCode中的样子：

二、Vue2目录

1、目录介绍：

\myproject:.
│  babel.config.js　　　　：Babel配置文件，Babel的作用是兼容旧的js环境。
│  package-lock.json　　　　：锁定安装时的包的版本号，使所有人的npm install安装的依赖版本一致
│  package.json　　　　　　：项目配置文件
│  
├─dist　　　　　　　　　　：工程打包发布的文件夹
│          
├─node_modules　　　　　　：npm 加载的项目依赖模块
│   
├─public：
│      favicon.ico　　　　：一个静态文件
│      index.html　　　　：首页入口文件
│      
└─src　　　　　　　　　　　　：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
    │  App.vue　　　　　　：项目入口文件
    │  main.js　　　　　　：项目的全局配置文件
    │  
    ├─assets　　　　　　　　：放置一些图片和logo
    │      logo.png
    │      
    └─components　　　　　　：目录里面放了一个演示组件
            HelloWorld.vue

2、HBuilderX中的样子：

 

下一章：VUE3 学习笔记（五）——页面启动逻辑分析