服务好又优惠的网站制作,装修公司名字大全,建设一个网站需要什么硬件,常用的网站开发设计语言博主个人微信小程序已经上线#xff1a;【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 总览2. node_modules3.public4.src5.assets6.components7.router8.stores9.views10.App.vue11.main.js12.index.html 专栏简介
本系列文章由浅入深#xff0c;从基础知识到实战…博主个人微信小程序已经上线【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 总览2. node_modules3.public4.src5.assets6.components7.router8.stores9.views10.App.vue11.main.js12.index.html 专栏简介
本系列文章由浅入深从基础知识到实战开发非常适合入门同学。
零基础读者也能成功由本系列文章入门但如果您具备以下基础将会事半功倍
HTML基础css基础js基础
当然即使从未接触过前端代码的小白也能轻松学习本系列课程因为我会在文章中简略穿插前端基础知识。
由于各平台对专栏文章的支持度不同所以如果您看到这篇文章的平台系统学习专栏文章的操作不够丝滑可以先关注小程序后续小程序会开发专栏博客功能。
可以直接搜索【中二少年工具箱】也可通过 二维码知乎地址https://www.zhihu.com/question/53230344/answer/3180004527 二维码csdn地址https://bbs.csdn.net/topics/618134623 二维码头条地址https://www.toutiao.com/w/1790412984859652/ 等入口进入扫码关注。 1. 总览
下面是新创建项目的目录 其中我们需要了解的有一下几个文件
node_modulespublicsrcassetscomponentsrouterstoresviewsApp.vuemain.jsindex.htmlvite.config.js
下面我们一一介绍这些文件的作用。
2. node_modules
这个文件夹存放项目依赖我们使用npm或者yarn下载的插件以及插件所依赖的一些资源都会下载到node_modules文件夹。这个我们不需要过多关注。
3.public
这个文件夹存放项目里的一些静态资源包括图片/css文件/js文件等。后面我们还会讲到一个存放静态资源的文件夹这两个文件夹的不同之处在于public存放的资源不会被编译。
也就是说public中存放的资源是什么最终打包vue后的项目根目录就会存在什么而后面将要讲解的静态资源路径则会被编译被编译后文件会被压缩混淆等等无法正常阅读和修改。
所以我们经常在public中存放一些公共资源或者在打包后仍然可能需要修改的文件。
4.src
src是项目的主要文件路径里面存放着vue所有需要编译的文件。
我们需要简单理解前端的编译。我们了解vue文件的后缀为.vue但是浏览器其实并不认识何为.vue文件它只认识.html文件。所以如果直接把.vue文件拖拽到浏览器中是无法正常显示的。
想要把vue文件变成浏览器认识的html文件就需要用到编译。编译的过程简单而言就是nodejs负责把src下面所有的vue文件js文件,css文件图片文件等都读取并按照规则组合变成一个巨大的html文件最终浏览器运行的是这个html文件。
只有src下的文件才会参与上述的编译过程其它文件并不会被编译。
也正是由于需要编译vue的运行和打包才需要nodejs环境。
5.assets
与上面的public对应也是一个存放静态资源的文件夹。
不同的是assets中存放的静态资源会被编译而上面已经讲过public中的静态资源不会被编译。
6.components
存放项目中的公共组件公共组件往往是一些基础通用的组件可以被复用到更多位置。
7.router
存放路由文件。路由的概念简而言之就是输入一个网址找到对应的页面。我们输入的网址即是路由地址。
由于网址的前面部分是域名地址所有页面都是一致的只有后面的部分不同所以在vue中网址后半部分即是路由地址。
初学者有个基础概念即可入门阶段并不需要深入了解路由很多时候我们只需要知道怎么写可以构建一个完整路由即可。先记结论再学原理。
8.stores
存放vue状态管理的文件。vue有两个重要的基础插件一是路由插件二是状态管理插件。
路由插件上面已经说过是控制页面跳转的。状态管理插件顾名思义是管理状态的。这里的状态一般是全局状态也就是说写在状态管理中的值可以在项目src目录下任何地方操作和使用从而达到全局状态管理的目的。
实现全局状态管理的插件时pinia而pinia如何应用如何定义的js文件则默认放在stores目录下。
9.views
这里存放和业务相关的前端页面项目中大部分的.vue文件都是存放在views文件夹下。
10.App.vue
这是我们所有vue文件的入口文件。
vue有组件的概念也就是所有的vue页面都是由一个个组件组合而成。项目中所有的vue组件都是组合起来后再放到App.vue中。这其中有很多细节涉及到路由的概念但是并不影响我们理解App.vue——所有vue文件的入口。
11.main.js
通过观察main.js中的代码可以发现main.js主要有两个作用一是引入各种插件全局样式二是将App.vue与index.html连接起来。
12.index.html
观察项目目录可以发现整个项目中只有一个html文件——index.html。
index.html中的关键代码如下 bodydiv idapp/divscript typemodule src/src/main.js/script/body这个文件里的代码非常简洁一个div元素提供id为app的容器用来盛放需要显示的前端代码。一个是script标签用来引入main.js文件。
main.js文件里除了引入插件的代码还有将App.vue与index.html连接起来的代码
app.mount(#app)将App.vue,main.js,index.html三个文件串联起来就能把三者的关系梳理清楚。
index.html把main.js引入把main.js中的功能引入页面。然后main.js中负责引入App.vue组件并把App.vue中的所有内容挂载到id为app的容器中。最终App.vue是组件的入口负责将所有的vue组件整合在一起。
三者脉络清晰后就能把所有的vue组件编译后都挂载到#app容器中。
