vue-cli脚手架工程目录架构分析

使用npm在线初始化方式可以快速构建一个单页应用工程,俗称vue-cli脚手架。

vue init webpack 之后就可以徜徉在代码的海洋里。

神曾说:“只因不小心在人群中多看了你一眼,为了不再孤苦思念你的容颜,我决定扒开你的外衣一探究竟。”

神又说:“前端开发的究极奥义?想要的话就给你,去找吧!我把世界上的一切都放在那里!”

So,熟悉代码目录结构吧!

微操作

代码打包

npm run build

根目录文件夹

文件夹名用途说明
build工程构建配置目录代码上线打包相关配置,如打包路径、内容等
config应用配置端口、域名配置,如 localhost:8080;生产或测试模式选择等
dist默认打包路径index.html、css和js压缩文件的存放位置,在config/index.js中配置
node_modules扩展包axios、vue、router、element-ui等
src应用程序源代码图片资源、vue模板包、应用入口文件、前端请求路由等
static静态资源静态资源,从根站点直接访问
test自动化测试版本迭代时,编写测试用例自测

根目录文件

文件名用途说明
index.html调试模式应用入口默认localhost:8080访问的页面,仅仅是一个调试入口
package-lock.json工程所需扩展包版本锁定锁定工程构建时各扩展包的版本信息(链接、SHA1等)
package.json扩展包列表及版本规约工程包含各扩展包的名称列表及版本号
README.md自述文件让工程做个简单的自我介绍
.babelrc基础配置浏览器、插件等预置条件
.editorconfig编辑器配置字符编码、缩进格式、缩进宽度等
.eslintignoreeslint忽略目录配置eslint不检查配置目录下的语法规则
.eslintrc.jseslint基础配置插件配置、规则风格等
.gitignoregit版本管理忽略目录配置git不检查配置目录下的代码版本更新
.postcssrc.jsCSS转化配置解决万恶的浏览器兼容性问题

目录结构导图

附目录结构导图一张

在这里插入图片描述

参考

Vue项目目录结构注解附assets与static目录的区别

End

第一次就到这里,一级文件目录说明是探索内在的结果。

刚开始学习vue,有不正确之处欢迎留言指正。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!