终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦
大致分析一下几个比较常用的文件把,如下图
1.build:主要用来配置构建项目以及webpack
2.config:项目开发配置
3.npm或者cnpm所下载的依赖包
4.你的源代码
5.静态文件夹,webpack打包时不会打包这里文件
6.最外层的页面一般title等都设置在这里
7.存放你要npm依赖包的json数据
大致介绍完项目结构,我们一起看看它页面的源码吧!
先从这个App.vue开始,这个文件仅此于外部的index意思就是index包含所有页面,而App.vue包含除了index的页面,也就是路由嵌套,后面会说到,在这里所创建的文件都是文件名.vue,页面的html格式就是一个template标签中包含一个div,相当于组件化的形式,而组件的内容写在这个div中(一个页面必须只有一个template包一个div,内容写在这个div中,不然会报错),而这个router-view标签就是当前页面下的子页面,可以理解成这个router-view是另一个页面,被当前页面所包含着,有点类似ifame标签的功能。
css,js格式
现在我们来看看HelloWorld.vue这个页面,这里js,css的代码放置格式它已经帮你写出来了,按照这种格式写就行了,需要提醒的就是style标签中的scoped属性,如果没写这条那么这个style的样式会影响到这个页面所有的子路由,如果加了那么这个样式只对当前页面起作用
看完页面我们看看路由的配置如下图
路由的路径在router下,刚开始打开会看到有报错,其实不是语法错误,是因为编译器默认编译es5的语法,而vue脚手架用的是es6的语法,我用的编译器是webStorm,只要设置一下就行了。
简单介绍一下routers中的结构,这里主要用来配置路由的,上面说过所有子路由都在App.vue下,所有App.vue是最外层的父路由,这里的routes中存的就是路由的数组,path就是你要访问你所创建的页面的路径,这里所配置的路由为’’/,也就是根路径所以你直接访问localhost:8080就会出现一个App.vue中插入一个HelloWorld.vue的页面(这个相当于路由嵌套),name就是给当前路由命名,可以在其他页面通过$route.name访问到当前页面路由的name,component相当于你要引用的路由页面,这里引用的是HelloWorld.vue这个页面,使用import将HelloWorld.vue引入
现在教大家创建一个文件,并配置路由
先创建一个后缀为vue文件,并把最基本的html结构写上
然后配置它的路由,先引入这个文件,用import,然后填写要访问这个文件的路由路径,这边写为/test,所有访问这个路由的url为:localhost:8080/#/test
输入url,一个APP.vue中嵌套test.vue(test被APP包裹)的页面就呈现了
vue脚手架默认的路由嵌套就是所有页面都嵌套在App.vue页面下,被App.vue包裹,现在教大家自由嵌套自己的页面,现在把test页面嵌套到HelloWorld.vue页面下
首先在HelloWorld.vue界面下加一个router-view标签(router-view放置子路由,就是被包裹的页面)
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!