项目结构
views文件夹一般是用来写各种页面的，每一个页面是一个view
router是路由，路由就是网址对应的页面
components一般是存组件的（view和components都可以存组件
整个的入口在main.js里面
vuex就是store
vue的基本概念
每一个页面都是.vue文件，每一个.vue都由三个部分组成：template（HTML），script（JS），CSS（style）。其中style里可以加scoped属性，不同组件之间的css选择器就不会互相影响了，很重要一个优势。
每一个页面可以分为多个部分，每个部分都可以由不同的组件实现，每一个组件都可以拆分出去。实现组件用如下语法实现（终于学会上传图片了）：
每一个vue组件都会导出一个对象，目前用到两个属性，一是name，不同即可；第二个是components，表示在templates里面会用到哪些其他的组件
着手项目
将bootstrap引入项目：打开根组件（视频里是APP.vue）在script里加如下内容：
创建NavBar.vue放到组件文件夹，在bootstrap网站里面找导航栏代码，直接粘贴到NavBar的template里面
粘贴完之后要export出去给别人用，也就是将组件打包出去，如下图，和第一幅图大同小异：
每个页面都会有一个导航栏，所以把它引入到根组件里（视频里是APP.vue），即在根组件里的script里加，格式如下：
当我们需要在某处用到某个组件时，就要把它放到该处的componts里面：
导入完后发现文字过于集中在两侧，想改成靠中间可以修改NavBar的样式，把“-fluid”去掉即可，见下图：
导航栏就此结束，下面写内容。
内容直接显示比较丑，可以在bootstrap里面搜cards组件，把所有内容括起来。还是粘贴到对应位置的template里即可：
但是这样的话会出现和导航栏一样的问题，可以用container将其括起来（敲div.container再tab可快速补全）：
红框是新加的
如果觉得内容区紧靠导航栏太丑了可以加css，如下：
首页到这里就结束了。
因为每个页面都是类似的，都是一个框框包裹一些内容，所以可以将这种重复的内容写成一个组件（放到components里面），这样当修改样式时可以一起修改，比较方便
做法也很简单，只要将你写好的需要复用的东西整体迁移到组件里即可，不过需要注意slot标签：
注意组件写完后别忘export，别的地方想用到组件别忘在script里import以及修改其中的component。
至此首页组件实现完毕，下面写好友列表。
因为好友列表页面也需要用到首页组件，所以和上面一样，需要import组件，修改components，template里面应用。其他页面同理，注意不同页面script里的name要不同。
页面创建好后下面要添加路由，在router下面的index.js里的const routes里添加（先复制已有的路由再修改path，name，component比较方便）
因为这里需要用到刚创建的六个组件，所以也要import，比较简单就不放图了。
至此已经实现了不同链接跳转不同页面，下面实现通过点击导航栏来跳转。
如果直接通过NavBar自带的改链接，每次跳转页面都会刷新，不属于前端渲染（写法见下图）：
因此我们采用如下写法：
其中name就是刚刚在router里面定义的名称。
（小技巧，摁住alt键在其他地方点击可以增加光标，方便多处修改）
至此前端渲染也处理完毕了，下面实现单独的页面，首先是动态页面。
布局思路如下（红字是我自己加的），因为页面比较复杂，所以可以用三个组件来实现：
写页面，先把组件创建好，components里面创建三个.vue组件。页面布局方面，可以用bootstrap里的grid系统。
对grid做简要说明：利用grid，我们可以定义每一行每一部分的宽度，每一行分成了十二份，我们可以定义每一元素占多少份（y总这里采用了左3右9，比较简单不上图了）。
依旧是复制粘贴bootstrap的代码，需要注意的是，grid最外面是一层container，而我们之前实现的框框组件已经包括了container，所以只需要实现里面的row和col即可，下图是快捷创建方式：
效果：
布局暂时弄完了，下面实现具体的组件，首先是用户信息组件
即使是具体的组件也会涉及到布局的问题，所以这里又简要设计了一下布局，其中左面是头像，右面是用户名，关注数，关注按钮：
因为这里又用到了布局，所以还是grid。
这里组件暂时调整好想看效果，要export（只需要name），然后再import（记得名字和路径写对），修改component（加入导入的组件）……老三样。
导入组件之后观察效果发现头像太大了，依旧在bootstrap里搜images，里面有响应式图片，其实只需要在img标签里加class=”img-fluid”。
修改后大小自适应，但是发现方形不好看，可以修改css，添加如下内容：
至此用户信息布局的左边就写好了，下面写右边
右边只需要写一些div即可（虽然如果之后加后端的话应该会更麻烦吧），最后的关注按钮依旧bootstrap，按钮class里“btn-sm”是小按钮，“-lg”是大按钮。
最后还是觉得右边的布局略丑，可以修改css样式，例如颜色，字体大小，加粗，按钮padding等：
用户信息也可以用卡片包裹起来，添加如下，和之前类似：
用户信息组件至此实现完毕，效果见下图
下面实现帖子列表组件
右面也是先写一个card（上面有图说明这里就不放了），然后依旧是：要export（只需要name），然后再import（记得名字和路径写对），修改component（加入导入的组件）……老三样。
但是这里很奇怪，y总没有export也可以正常import，不知道为什么，我仔细比对了用户信息组件，那个是正常export了，不知道为什么
至此右边的布局暂时写完了（就一个框没啥好展示的），下面写交互内容，也就是让不同人看到的用户信息不同，比如头像，用户名这些很明显不同人是不同的，也就是一个参数。而且这三个组件都需要数据，数据一般放在顶层组件
下面写存储数据（springboot噩梦之setup）
先贴张课件图：
我们可以在setup里定义一堆变量，首先定义user变量，user里面可以定义一些信息，例如用户名，粉丝数，是否关注等。
存完这些属性后，未来在模板里用到的值，都需要return出去，这样就可以在template里用这个属性了。
下面讲如何在不同组件之间传递信息
父组件给子组件传递信息是通过props属性，子组件给父组件传递信息利用事件，调用函数实现。
如果想给组件传递一个信息/绑定一个属性，一定要在属性前加一个冒号，是“v-bind:”的缩写：
引号引起来的user不是一个字符串而是一个表达式，可以把user的值传过去，就写一个user即可。
要想在子组件里接收消息，需要把接收的参数放到props属性里：
这样在子组件的template里就可以直接用了，示例：
之后讲了一下computed相关内容，没听懂，放张图：
下面讲关注按钮
关注按钮要实现的是，首先，如果没有关注显示的应该是“关注”；如果已经关注，显示的应该是“取消关注”。这里可以用v-if来实现（写在template里面的，上面的课件里有），成立显示，不成立不显示。
写法示例：
现然，这种有v-if的标签一般来说都要写俩，除非另一种情况就是隐藏。
关注按钮要实现的另一个方面是，关注之后应该按钮会变化。首先定义事件处理函数，关注和取消关注：
函数也要写在子组件的export里的setup里。console.log是方便调试用的，可以在f12里看到。
注意函数定义完之后也要return出去才能用，return函数名即可。
绑定点击事件只需要在按钮里添加“@click”即可，后接函数名，示例如下：
因为关注和取消关注需要修改is_followed，而这是在user里面，user又是父组件传过来的，在哪创建在哪修改，因此需要子组件向父组件传递信息来修改is_followed，也就是通过绑定事件的方法。
首先，在父组件的子组件标签里写绑定事件，绑定事件写法如下：
之后在export里写绑定事件触发的函数，示例如下：
啊……是到图片上传上限了吗=-=，那我另开一贴，明明马上要结束的说。
