天行健,君子以自强不息;地势坤,君子以厚德载物。
每个人都有惰性,但不断学习是好好生活的根本,共勉!
文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。
宫女如花满春殿,只今惟有鹧鸪飞。
——《越中览古》
文章目录
Vue3入门
vue项目结构
1. vue项目结构概览
项目结构概览表格
目录或文件说明build项目构建脚本目录,是项目构建(webpack)的相关代码config项目配置目录,包括端口号等,初学使用默认即可,后续可配置node_modulesnpm加载的项目依赖模块的目录src项目开发目录,前端开发基本都是在这个目录,包含几个目录和文件static静态资源目录,如字体、图片等静态资源,该目录不会被webpack构建index.html首页入口文件,可添加一些meta信息或统计代码等。该文件是应用的模板文件,vue应用通过这个文件页面来运行,也可通过lodash等模板语法在这个文件中插值。注:index.html文件不是负责管理页面最终展示的模板,而是管理vue应用之外的静态html文件,一般用在高级功能的时候会修改该文件package.json项目配置文件,即npm包配置文件,定义了项目的npm脚本、依赖包等信息test出实测实目录,可删除.xxxx文件以.开头的文件都是一些配置文件,如语法配置、git配置等README.md项目说明文档,markdown格式
2. vue项目结构详述
2.1 build
关于build文件夹的内容详述
build目录时构建脚本目录
build目录下的文件与说明如下表
文件描述build.js生产环境构建脚本check-versions.js检查npm、node.js版本utils.js构建相关工具方法vue-loader.conf.js配置css加载器以及编译css之后自动添加前缀webpack.base.conf.jswebpack基本配置webpack.dev.conf.jswebpack开发环境配置webpack.prod.conf.jswebpack生产环境配置
2.2 config
config是vue项目配置文件目录
关于其中的文件和描述下表
文件描述dev.env.js开发环境变量index.js项目配置文件prod.env.js生产环境变量
2.3 node_modules
该目录是vue项目的npm加载依赖模块的存储目录,用于存放npm加载的项目依赖模块
2.4 src
src目录是开发目录,开发的内容基本都在这个目录完成
该目录包含的文件和目录如下表
文件或目录描述assets资源目录,用于存放图片或公共js、公共css等,因为属于代码目录下,所以可以用webpack来操作和处理,即可以使用一些预处理,比如Sass/SCSS或者Styluscomponents用于存放自定义组件的目录,里面会默认有一个示例组件router前端路由目录,需要配置的路由路径写在index.js里面App.vue根组件,该文件为Vue应用的根节点组件main.js应用的入口文件,该文件主要引用vue框架、根组件及路由设置,并定义vue实例,即初始化Vue应用并且指定应用挂载到index.html文件中的哪个HTML元素上,通常还会做一些注册全局组件或添加额外的Vue库的操作
2.5 static
static目录是静态资源目录,用于存放图片、字体等资源,不会被webpack构建
2.6 index.html
index.html文件为首页入口文件,可添加一些meta信息或统计代码等。该文件是应用的模板文件,vue应用通过这个文件页面来运行,也可通过lodash等模板语法在这个文件中插值。注:index.html文件不是负责管理页面最终展示的模板,而是管理vue应用之外的静态html文件,一般用在高级功能的时候会修改该文件
2.7 package.json
package.json文件是项目配置文件,即npm包配置文件,定义了项目的npm脚本、依赖包等信息
2.8 .xxx文件
以.开头的文件,是一些配置文件,如语法配置、git配置等
如下表是一些常用文件
文件描述.babelrcbabel编译参数.editorconfig编译器相关的配置,代码格式.eslintignore配置需要忽略的路径,一般build、config、dist、test等目录会配置忽略.eslintrc.js配置代码格式风格检查规则.gitignore.git上传需要忽略的文件配置.postcssrc.jscss转换工具
2.9 README.md
README.md是项目说明文档,markdown格式
感谢阅读,祝君暴富!
版权归原作者 寒山李白 所有, 如有侵权,请联系我们删除。