项目2---十次方项目开发---前台---05

UNXT：服务端渲染技术

SEO：搜索引擎优化

搜索引擎收入则网站快。数据和静态页面一起抓取作为静态的页面。

---------------------------------------------------------------------------------01----------------------------------------------------------------------------------

搭建NUXT：看文档要指定两个名字的。

这个是一个很纯的模板的。

改名字：

老师的脚手架环境。

看下目录：assets主要是存储静态的资源文件

扫描二维码关注公众号，回复： 9381028 查看本文章

layouts：整个的布局文件

pages：页面

plugins：放的是插件

store:状态管理

------------------------------------------------------------------------------02---------------------------------------------------------------------------------

快速入门布局：提取头部和尾部。

第一步：布局文件。

第二步：中间的是在哪里来的？

这里面自动来的。

----------------------------------------------------------------------------03------------------------------------------------------------------------------

页面路由：

知识点1：自动找页面

根目录自动找布局中间的页面：

--------------------------------------------------

可以直接这样写：

----

这样也是可以的。

同理：活动：

导航

----------------------------------------------------------------------------04-------------------------------------------------------------------------------

服务端的数据渲染。

钩子函数：https://www.cnblogs.com/8080zh/p/11164277.html

是在组件的初始化之前调用，是在后端调用的。

牢记，这个就相当于后端的生命周期函数。

这个方法执行的代码都是在服务区执行的。

UNTX官网：

测试：

加载数据的逻辑要写在这里在后台加载。

------------------------------------------------------------------------------------------------------------------------------------------------------------

安装axios:

使用：

----------------------------------------------------------------------------05-------------------------------------------------------------------------------

动态路由：

注意命名规则：

动态的参数要用下划线开头的。

------

点击进入活动详情：

注意这个写法：params是多有的参数。_id.vue说明参数名称是id所以是params.id。

跳转前：

跳转后：

注意不是父子路由

也可以这样的：

表达式加:to

用nuxt不用路由的跳转。

-----------------------------------------------------------------------------06----------------------------------------------------------------------------------------

利用nuxt实现十次方网站前台搭建：注意这个是从0开始搭建的，一步一步来的。

第一步：

拷贝

复制到这里。

第二步：

第三步：

拷贝头部和尾部。到这个文件。

替换：

复制这个代码到头部。同理尾部信息。替换文件的路径。

引入样式：

第四步：

头部信息完成了。

-----------------------------------------------------07----------08-------------------------------------------------------------------------------

拷贝中间的界面。注意替换到模板里面就可以了。

第一步：

复制这个html。

拷贝到这里：

第二步：替换：

第三步：导入样式

注意这个页面路由的底座是自动匹配的是pages/index.vue的。

-----------------------------------------------------09----头条页面-----------------------------------------------------------------------------------------

问答页面：

第一步：

第二步：

同样的方法去拷贝。去替换即可。

-----------------------------------------------------10---------------------------------------------------------------------------------------------

活动页面：

-----------------------------------------------------11---------------------------------------------------------------------------------------------

交友界面：

第一步：

第二步：导入样式：

----------------------------------------------------12---------------------------------------------------------------------------------------------

吐槽：

第一步：

第二步：拷贝

第三步：替换.

第四步：引入css

-----------------------------------------------------13---------------------------------------------------------------------------------------------

招聘：

-----------------------------------------------------14---------------------------------------------------------------------------------------------

导航：重点看

-----

注意下这三个部分：

其中nuxt自动找：

------

导航的激活提示：

静态界面：

优化后的：

router的官方文档看下激活的样式和包含所有路径的是如何解决的：https://router.vuejs.org/zh/api/#router-link

-----------------------------------------------------15---------------------------------------------------------------------------------------------

前端分层的思想：数据层，表现层，应用层。

十次方的后台的代码思路：

第一步：可以在这里添加拦截器什么的。

这个是老的，nuxt是没有测试和部署环境的。

第二步：引入注意这个参数是咋回事，自己看下源码什么的。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

活动模块的渲染：

原来：

设计思路：

第一步：创建工具类

第二步：创建api：

第三步：

调用。

注意这个items也是相当于声明一个data。asyncData的固定写法而已。

第四步写静态界面：

图片的地址。

---------------------------------------16----------17--------------18------------------------------------------------------------------------------------------

知识点：Vue如何添加插件。

瀑布流的效果：

安装插件的步骤：

第一步：

安装插件，可以看到组件已经加进来了。可是这个插件是如何使用的呢？

第二步：写插件写加载插件的逻辑，这样就可以全局引用了。这个是固定的额写法。

第三步：在nuxt的配置文件配置一下，注意src指向js

配置插件：注意图中的第一点1设计不需要服务端进行渲染的。服务端只加载第一页数据。

第四步：使用

注意数据死拼接的。

---

一个新的发现：

这两个是等价的。

图片的地址：https://img-ads.csdn.net/2018/201805171739161420.jpg

----------------------------------------------------19-------------------------------------------------------------------------------------------------------

活动的详情页面：

依旧是替换html等。跳新的界面。

-------------------------------------------------20-------------------------------------------------------------------------------------------------------------

页面的数据渲染。

注意和文件的名称要一致哦。

地址：http://localhost:3000/gathering/item/1

-------------------------------------------------21-------------------------------------------------------------------------------------------------------------

分享组件：

这个功能是如何实现的呢？

提供了css的样式表和js我们要在vue中进行与引入。

第一步：

vue引用外部的的js和css如何的使用呢？这个是无法用import导入的。

定义一个头信息，导入外部的js和css。

第二步：

使用外部的css的js，查看导入情况。

1.所有的图标

2.指定图表

3.分享的标题

4.分享的地址

------------------

微信的二维码默认是根据分享的地址生成的。

-------------------------------------------------22-------------------23------------------------------------------------------------------------------------------

招聘列表：

api的添加。

-------------------------------------------------------24------------------------------------

渲染数据,注意新的写法哦