vue-cli创建的项目的目录结构及说明

一、

├── build              // 项目构建(webpack)相关代码             记忆:(构建)    9个

│ ├── build.js       // 生产环境构建代码

【build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成 静态文件,存放在项目根目录的 dist 文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成),当然你可以自己设置路径,在 config 文件夹中的 index.js 中改,可以指定主页,默认是 index.html】

│ ├── check-versions.js // 检查node&npm等版本

【检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来】

│ ├── dev-client.js       // 热加载相关

【本地客户端开发中有关热更新】

│ ├── dev-server.js        // 构建本地服务器

【用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。】

│ ├── utils.js          // 构建配置公用工具

【一个功能模块,里面引入了一些css-loader,以便于解析各种格式的css,如 less,sass 什么的。】

│ ├── vue-loader.conf.js // vue加载器

【它把上面的 utils.js 引入了,应该是用于切换 开发模式和 生产模式的文件吧,以便于用不同模式来解析css。】

│ ├── webpack.base.conf.js // webpack基础环境配置

│ ├── webpack.dev.conf.js //  webpack开发环境配置

│ └── webpack.prod.conf.js // webpack生产环境配置

【是webpack的一些打包的设置,比如指定入口文件啊,依赖安装路径啊,对不同后缀的文件用不同的loader去解析呀什么的】

二、
├── config// 项目开发环境配置相关代码                        记忆: (环配)    3个  

│ ├── dev.env.js  // 开发环境变量(看词明意)

│ ├── index.js //项目一些配置变量

│ └── prod.env.js // 生产环境变量

三、
├──node_modules// 项目依赖的模块                         记忆: (依赖)    *个    

【依赖所存在的文件,就是我们一开始使用 npm install 安装的东西,都在里面,以后我们要添加依赖也是放在这个里面,npm install 可以从当前根目录中的 package.json 文件中读取所要安装的模块的名称和版本,然后一次性安装所有的依赖。】
四、

├── src// 源码目录                 5

1
│ ├──  assets// 资源目录

【放一些静态图片资源的目录】

│ │ └── logo.png

2    
│ ├── components// vue公共组件

【存放的是我们写的各种组件,各个组件联系在一起组成一个完整的项目】

│ │ └── Hello.vue

3
│ ├──router// 前端路由

【定义路由的地方,虽然也可以直接在 main.js 中直接定义,但是分开的话结构更加清晰】

│ │ └── index.js// 路由配置文件

4
│ ├── App.vue// 页面入口文件(根组件)

【App.vue 是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式】

5
│ └── main.js// 程序入口文件(入口js文件)

【入口文件,引入了 vue模块 和 app.vue 组件 以及 路由router,我们需要在全局使用的一些东西也可以定义在这里面。】

五、

└── static// 静态文件,比如一些图片,json数据等

【用于存放我们需要使用的一些外部的js、css文件,需要使用的时候从这里引到文件内。】

│ ├── .gitkeep
    


剩余、
├── .babelrc// ES6语法编译配置

├── .editorconfig// 定义代码格式

├── .gitignore// git上传需要忽略的文件格式

├── index.html// 入口页面

├── package.json// 项目基本信息

├── README.md// 项目说明


--------------------- 
作者:手掌日月摘星辰 
来源:CSDN 
原文:https://blog.csdn.net/qq_34543438/article/details/72868546 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值