打开昨天的vue项目，没记错的话网上查到的信息说，代码编辑部分就只在src文件夹，包括asset,router和components，其他的全是配置文件。
项目新建默认是一个巨大的vue图标和两行链接，布局在HelloWorld.vue，但是我昨天还没找到那个名为logo.png的图标是哪里插进去的。今天先摸清页面，然后做一个扫雷难度选择界面，准备给扫雷棋盘的大小数据传参。
开始咯！不懂的或者准备回头看的全都黄底标记一下，欸嘿。
把一堆超链接删掉以后页面只留下标题和图标。
vue文件页面总结：template + script + style 我直觉style不是必须的
1 <template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <ul><li></li></ul>
5 </div>
6 </template>
template看起来和HTML差不多，不过是双括号传参，至于页面跳转，原项目新建提供的方式是直接传url： <a href="https://vuejs.org" target="_blank">Core Docs</a> ，自制vue怎么跳转还不知道。
1 <script>
2 export default {
3 name: 'HelloWorld',
4 data () {
5 return {
6 msg: 'Welcome to Your Vue.js App'
7 }
8 }
9 }
10 </script>
刚刚出现的参数msg赋值就在这，就是不知道怎么读其他页面传过来的值。我看了眼router文件夹下的App.vue，name应该是绑死vue文件的文件名。手贱试试改name。
把name改掉了，但是结果没有变化，网络也没有崩。上百度查了一下，这个只作为组件选项用的，全局注册的时候自动分配name。原来vue文件不止可以做页面喔，像这个属性可以用来捏树形组件，或许拿来做目录是不错的选择。
搜的网页先码住，vue树形组件： https://blog.csdn.net/weixin_39015132/article/details/83573896 。name除了自我调用以外，还可以方便出error的时候查看信息()，最常用的是“当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。”大佬说的很简练，但是我不知道keep-alive是啥，有点懵。码住，回头查。
至于下面的 data () {return {msg: 'Welcome to Your Vue.js App'}} 应该就是页面数据处理的地方。这个结构很像后端语言写的那种完整函数，应该能整很多活。但是百度搜了一下没查到data能不能递归，好像很少写很长的data，如果要写长data基本都是写data内的return。回头前辈有空了我问问。
最后对于整个export default查了一下，是模块导出，可以导出到本组件，也可以导出给其他页面（在其它页面用import）。百度发现还有一种是export不带default。码住一下网页： https://blog.csdn.net/qq_27674439/article/details/108094742 这个佬讲了export default干什么用的，还有它和default的区别，很详细。能懂但是代码还没记，回头实现一下代码试试。看了这个网页后好奇export能不能直接传参，又查了一下，发现一个很详细的vue组件传参教程，码住网页回头看： https://zhuanlan.zhihu.com/p/262530502?utm_id=0 大概是export和export default都是可以传的，但得通过内部的props或者添加其他修饰符什么的。回头可以挨个实现一下。
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
</style>
style部分很明显是格式设置，属性和css都是共通的。
scoped在创建的时候就有备注说明：能将格式限制在这个HelloWorld.vue里；
font-weight查了一下是字体粗细：细lighter 正常normal 粗bold 超粗bolder 继承父体inherit
list-style-type查了一下是列表子项之前的内容：什么都没有就是none，可以赋值字符串：
参考网址 https://blog.csdn.net/No1banana/article/details/122832241 这个网址顺带介绍了list-style-image、list-style-position、list-style，全是列表子项前符号的设置。padding据说是清除网页原有的padding，使设计和开发者预期的一致。display:垂直显示自定义宽高block，并排显示定死宽高inline，并排自定义宽高inline-block
总的来说，像是把html、js、css放在了一个文件里。
突然发现我忘了干什么——那个logo图标怎么插进去的？
原来是在App.vue里设置的。HelloWorld看着全，但只是页面布局的一个小组件。在App.vue中不过是一个<router-view>
1 <template> 2 <div id="app"> 3 <img src="./assets/logo.png"> 4 <router-view/> 5 </div> 6 </template>
但为什么是router-view呢？找了一圈发现是router文件夹下index.js的设置：
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import HelloWorld from '@/components/HelloWorld'
4
5 Vue.use(Router)
6
7 export default new Router({
8 routes: [
9 {
10 path: '/',
11 name: 'HelloWorld',
12 component: HelloWorld
13 }
14 ]
15 })
这里将routes列表首项定为HelloWorld组件了，但和“router-view”还是没关系，我打算出手实验一下，让routes列表多一个HelloWorld组件。很遗憾的是，多出的这一个在页面上毫无反馈。这个时候，我看到了path，有了个大胆的想法。
1 export default new Router({
2 routes: [
3 {
4 path: '/',
5 name: 'HelloWorld',
6 component: HelloWorld
7 },
8 {
9 path: '/hwPage',
10 name: 'HelloWorld',
11 component: HelloWorld
12 }
13 ]
14 })
把它改成这样子以后，在代码运行的网页网址后加上hwPage，会进入一模一样的网页。
我百度查一查这个router到底是啥东西。
router相当于一个路由器，所以参数会有path、name、component，由index.js配置。
最开始的：
import Vue from 'vue' import Router from 'vue-router'
似乎是必写的，然后写组件的import用于配置路由相关信息： import HelloWorld from '@/components/HelloWorld' 该import的都import完了之后，给Vue安装插件 Vue.use(Router) 按照网络教程还需要创建routes然后const router=new VueRouter……但很明显，这个系统自建的要简练很多。再下面就是将路由和组件连接起来。
那么router-view其实是路由使用的一种方式：Router有两种标签。
<router-link>：据说会被渲染成一个<a>标签。我试了一下，直接把view改成link不显示，如果是 <router-link>goto</router-link> 的话，也不显示，太奇怪了，加了style也没用。搜了搜，原来正确的使用方法是： <router-link to="/">goto</router-link> to后面的字符串就是page，但是点击后仍跳转到的页面仍然有logo，非常奇怪。<router-view>：该标签会根据当前的路径，动态渲染出不同的组件。link要to，而view要name。没有name的话就会默认default。比如系统生成的这一行还能显示成 <router-view name="HelloWorld"/> 。至于主页，通过main.js设定。
目前为止可算是串起来了。试图在主页写一个连接，点击跳转到全新的页面，只显示HelloWorld。尝试复刻自己的HelloWorld，但是跳错说script只能有一个，有点懵，这个文件里只有一个啊。搞了大半天，发现页面还是通过一个html控制的，这个不在src里……思维定势害死人。
我在src里改了大半天一无所获，查资料看别人怎么新建的，结果人家开头就整个html。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>winmine</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
总结一下：src外html→src内main.js+App.vue→index.js+components
怎么感觉我从0学起一样的……
标签：vue,name,记录,HelloWorld,学习,import,router,页面 From： https://www.cnblogs.com/yyn20230517/p/17469019.html