更好的了解项目的目录结构,能更好的去开发项目:
当前展示的目录结构是基于vite搭建的项目。
目录结构如下图所示:
111.png我的代码是托管在我自己的git服务器上边的,默认安装的时候是不存在的。
1:dist目录
存放打包之后的代码文件
2:node_modules
存放项目依赖的包目录
3:public
存放公共文件目录
4:src
存放代码的主要目录
222.png(1):assets
我这里存放了每个页面对应的css、js以及图片文件
(2):components
存放项目使用的公共组件
(3):router
存放vue-router相关的文件
(4):types
存放typescript 支持vue文件的相关配置文件
(5):views
存放页面文件(.vue)
(6):App.vue
根组件文件
(7):main.ts
入口文件ts文件
// 引入vue3中vue框架的createApp这个方法,创建一个实例
import { createApp } from "vue";
import App from "/@/App.vue";
// 创建实例
const app = createApp(App);
// 将示例挂载至节点
app.mount("#app");
5:.gitignore
Git相关文件,配置不上传至git库的文件,了解更多,请移步:《Git 忽略提交 .gitignore》
6:index.html
项目入口文件
7:package.json
存放依赖包管理及命令管理信息文件
(1):scripts
"scripts": {
"dev": "vite",
"build": "vite build"
},
这里是命令配置,我的项目时采用vite创建的,因此命令有vite
yarn dev
yarn build
(2):开发环境及生产环境
Dependencies:生产环境
devDependencies:开发环境
8:readme.md
使用markdown编写的文档文件
9:ts.config.json
Typescript的配置文件
10:vite.config.ts
项目配置文件
11:yarn.locak
使用yarn包管理生成的文件,由yarn自动生成,自动管理。不需要管。
|-node_modules -- 项目依赖包的目录
|-public -- 项目公用文件
|--favicon.ico -- 网站地址栏前面的小图标
|-src -- 源文件目录,程序员主要工作的地方
|-assets -- 静态文件目录,图片图标,比如网站logo
|-components -- Vue3.x的自定义组件目录
|--App.vue -- 项目的根组件,单页应用都需要的
|--index.css -- 一般项目的通用CSS样式写在这里,main.js引入
|--main.js -- 项目入口文件,SPA单页应用都需要入口文件
|--.gitignore -- git的管理配置文件,设置那些目录或文件不管理
|-- index.html -- 项目的默认首页,Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件,用于防止包版本不一样导致的错误
|-- package.json -- 项目配置文件,包管理、项目名称、版本和命令
有好的建议,请在下方输入你的评论;
欢迎访问个人博客
https://guanchao.site
网友评论