2020优品购电商3.0项目-Nuxt第1天-003
1 Nuxt介绍
SSR：server side render服务端渲染，https://www.jianshu.com/p/10b6074d772c
Nuxt 是一个 服务器端渲染 框架（SSR）
使用它的好处：
1. 内置 webpack 对资源文件的压缩、优化、资源文件的编译等
2. 拥有页面静态化功能，一方面可以提高性能，另一方面可以加强SEO
（Nuxt可以在服务器端预告把数据写入到页面中，然后显示已经保存数据的页面）
什么是SEO？
答：搜索引擎优化。百度、谷歌等只会采集页面中的静态数据，不会采集A JAX取出来的数据。
总结：A JAX取数据的缺点：不利于SEO。
解决办法：使用SSR，在服务器端先把数据处理好并放到页面中，然后把带数据的页面发送给前
端。这时前端的页面中就已经有数据了（不是通过A JAX后取的了），这样搜索引擎就可以采集到页面中
的数据了。
2 安装
2.1 Nuxt项目通用初始化过程
1. 安装node.js
2. 设置node使用淘宝镜像
npm install -g nrm
nrm use taobao
3. 使用 npm 安装 vue-cli
npm install -g vue-cli
4. 安装nuxt项目
使得系统环境支持create-nuxt-app的命令，执行如下命令
yarn global add create-nuxt-app
执行结果：
为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。确保安装了npx（npx在
NPM版本5.2.0默认安装了）：
npx create-nuxt-app <项目名> (xc-pc-01)
第一步：创建项目，如下图：然后开始下载所需要的包
第二步：开始选择项目名称， 直接回车
第三步：项目描述 直接回车
第四步：作者姓名
第五步：选择包管理器
Yarn和Npm的区别：
https://www.jianshu.com/p/254794d5e741
第六步：选择UI框架,None
第七步：选择服务器框架
第八步：选择Nuxt的模块
第九步：选择语法检查工具
第十步：选择测试框架
第十一步：选择渲染模式
第十二步：选择开发工具
第十三步：等待安装完成
# 安装项目所有依赖
npm run install
# 服务在热重载状态下运行在localhost:3000
npm run dev
# 编译成上线项目并且启动服务
npm run build
npm run start
2.2 热更新
说明：Nuxt支持热更新，即，每当我们修改了代码并保存时，代码会自动重新编译代码，页面也会
自动刷新。
2.3 目录结构
3 页面组件
3.1 页面组件结构
pages目录中保存的是项目中的页面，每个页面以 .vue 结尾，每一个页面就是一个“页面组件”，每
个页面组件都由三部分组成：
1. 模板（HTML）（必须）
2. JS代码
3. CSS样式
页面组件代码结构：
<template>
模板内容(html内容，注意：必须有一个根元素)
</template>
<script>
// 组件的JS部分
export default {
}
</script>
<style>
组件的CSS部分
</style>
实战代码：商品列表
1. 创建 pages/list.vue 页面
<template>
<div>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>商品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,k) in goods" :key="k">
<td>{{v.id}}</td>
<td>{{v.goods_name}}</td>
<td>{{v.price}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data:function(){
return {
goods:[
{
'id':1,
'goods_name':'iphone x',
'price':7900
},
{
'id':2,
'goods_name':'宝马 5系',
'price':500000
}
]
}
}
}
</script>
<style>
table {
border-collapse: collapse;
}
</style>
2. 浏览器中访问 /list
总结：
1. 每个页面就是一个组件（和之前学习的Vue是一样的）
2. 每个组件由三部分组件
3.2 布局文件
如果项目中存在 layouts/default.vue 文件，那么 Nuxt 在渲染每个页面时，都会使用这个
defaults.vue 文件做为布局文件。具体的效果是：把页面中的所有内容嵌入到布局文件中显示，在布局
文件中使用 <nuxt/> 标签表示页面嵌入的内容：
总结：
1. 我们实际看到的页面是：布局文件+pages下的文件合并之后的内容
2. 如果有布局就合并，没有就不合并
3. 默认使用 default.vue
实战应用：我们一般把网站中公共的部分制作成布局文件（比如：页头、页脚、导航等）。
第一步：编写main.vue布局文件
在main布局中编写如下代码：
<template>
<div>
<h1>页头</h1>
<nuxt></nuxt>
<h2>页脚</h2>
</div>
</template>
第二步：在Hello.vue中指定布局文件
<template>
<div>
Hello
</div>
</template>
<script>
export default {
layout:'main'
}
</script>
<style>
</style>
第三步：运行结果
3.3 页面头信息
根据我们前面制作的几个页面，我们会发现，页面中都没有头信息（标签的内容）。
在Nuxt页面中是不能使用head标签的，那么应该如何设置页面的标题、meta、引入JS和引入CSS
呢？比如要想要设置以下信息该怎么办：
<head>
<title>购物车页面</title>
<meta charset="utf-8">
<meta name="keywords" content="购物车页关键字">
<meta name="description" content="购物车页描述">
<link rel="stylesheet" href="style/base.css" type="text/css">
<link rel="stylesheet" href="style/global.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
我们可以在组件的JS中添加一个 head 属性来设置这些内容：
head:{
title:'购物车页面',
meta:[
{charset:'utf-8'},
{name:'keywords',content:'购物车页关键字'},
{name:'description',content:'购物车页描述'}
],
link:[
{rel:'stylesheet',href:'style/base.css'},
{rel:'stylesheet',href:'style/global.css'}
],
script:[
{type:'text/javascript',src:'js/jquery-1.8.3.min.js'}
]
}
3.4 页面公共头信息
有些头信息如果一个一个页面设置会比较麻烦，比如 charset。我们可以在 nuxt.config.js 配置文
件中设置所有页面都公共的头信息。
1. 配置公共的head 信息
总结：
1. 在 nuxt.config.js 中可以使用 head 设置所有页面公共的 head 信息（标题、编码、meta等）
2. 在每个页面中可以使用 head 属性设置这个页面的head信息
3. 如果页面中的head信息如果添加 hid 属性，就会把公共的相同的hid属性覆盖掉，否则就添加
两次
最佳实战：
1. 在公共(nuxt.config.js)里设置：编码、viewport、icon图标。
2. 每个页面单独设置：标题、引入的CSS和JS、网站关键字、网站描述。
3.5 实战：Nuxt中导入商城的登录页面
实现步骤：
第一步：导入资源文件image、js、style：
第二步：创建布局文件：直接在main页面中修改
main页面初始化内容：
<template>
<div>
</div>
</template>
<script>
</script>
<style>
</style>
将登录和注册页面公共的头信息和底部信息拷贝进来
<template>
<div>
<!-- 顶部导航 start -->
<div class="topnav">
<div class="topnav_bd w990 bc">
<div class="topnav_left">
</div>
<div class="topnav_right fr">
<ul>
<li>您好，欢迎来到商城！[<a href="login.html">登录</a>] [<a
href="register.html">免费注册</a>] </li>
<li class="line">|</li>
<li>我的订单</li>
<li class="line">|</li>
<li>客户服务</li>
</ul>
</div>
</div>
</div>
<!-- 顶部导航 end -->
<div style="clear:both;"></div>
<!-- 页面头部 start -->
<div class="header w990 bc mt15">
<div class="logo w990">
<h2 class="fl"><a href="index.html"><img src="images/logo.png"
alt="商城"></a></h2>
</div>
</div>
<!-- 页面头部 end -->
<nuxt/>
<div style="clear:both;"></div>
<!-- 底部版权 start -->
<div class="footer w1210 bc mt15">
<p class="links">
<a href="">关于我们</a> |
<a href="">联系我们</a> |
<a href="">人才招聘</a> |
<a href="">商家入驻</a> |
<a href="">千寻网</a> |
<a href="">奢侈品网</a> |
<a href="">广告服务</a> |
<a href="">移动终端</a> |
<a href="">友情链接</a> |
<a href="">销售联盟</a> |
<a href="">商城论坛</a>
</p>
<p class="copyright">
© 2005-2013 京东网上商城 版权所有，并保留所有权利。 ICP备案证书号:京ICP证
070359号
</p>
<p class="auth">
<a href=""><img src="images/xin.png" alt="" /></a>
<a href=""><img src="images/kexin.jpg" alt="" /></a>
<a href=""><img src="images/police.jpg" alt="" /></a>
<a href=""><img src="images/beian.gif" alt="" /></a>
</p>
</div>
<!-- 底部版权 end -->
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
第三步：在css文件中引入样式文件
<script>
export default {
head:{
link:[
{rel:'stylesheet',href:"/style/base.css"},
{rel:'stylesheet',href:"/style/global.css"},
{rel:'stylesheet',href:"/style/header.css"},
{rel:'stylesheet',href:"/style/login.css"},
{rel:'stylesheet',href:"/style/footer.css"}
]
}
}
</script>
第四步：制作登录页面：
<template>
<!-- 登录主体部分start -->
<div class="login w990 bc mt10">
<div class="login_hd">
<h2>用户登录</h2>
<b></b>
</div>
<div class="login_bd">
<div class="login_form fl">
<form action="" method="post">
<ul>
<li>
<label for="">手机号：</label>
<input type="text" class="txt" name="mobile" />
</li>
<li>
<label for="">密码：</label>
<input type="password" class="txt" name="password" />
<a href="">忘记密码?</a>
</li>
<li class="checkcode">
<label for="">验证码：</label>
<input type="text" name="checkcode" />
<img src="images/checkcode1.jpg" alt="" />
<span>看不清？<a href="">换一张</a></span>
</li>
<li>
<label for=""> </label>
<input type="checkbox" class="chb" /> 保存登录信息
</li>
<li>
<label for=""> </label>
<input type="submit" value="" class="login_btn" />
</li>
</ul>
</form>
<div class="coagent mt15">
<dl>
<dt>使用合作网站登录商城：</dt>
<dd class="qq"><a href=""><span></span>QQ</a></dd>
<dd class="weibo"><a href=""><span></span>新浪微博</a></dd>
<dd class="yi"><a href=""><span></span>网易</a></dd>
<dd class="renren"><a href=""><span></span>人人</a></dd>
<dd class="qihu"><a href=""><span></span>奇虎360</a></dd>
<dd class=""><a href=""><span></span>百度</a></dd>
<dd class="douban"><a href=""><span></span>豆瓣</a></dd>
</dl>
</div>
</div>
<div class="guide fl">
<h3>还不是商城用户</h3>
<p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入
吧!</p>
<a href="regist.html" class="reg_btn">免费注册 >></a>
</div>
</div>
</div>
<!-- 登录主体部分end -->
</template>
<script>
export default {
layout:'main'
}
</script>
<style>
</style>
第五步：制作注册页面：
<template>
<!-- 注册主体部分start -->
<div class="login w990 bc mt10 regist">
<div class="login_hd">
<h2>用户注册</h2>
<b></b>
</div>
<div class="login_bd">
<div class="login_form fl">
<form action="" method="post">
<ul>
<li>
<label for="">用户名：</label>
<input type="text" class="txt" name="username" />
<p>3-20位字符，可由中文、字母、数字和下划线组成</p>
</li>
<li>
<label for="">密码：</label>
<input type="password" class="txt" name="password" />
<p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号
</p>
</li>
<li>
<label for="">确认密码：</label>
<input type="password" class="txt" name="password" />
<p> <span>请再次输入密码</span></p>
</li>
<li>
<label for="">手机号码：</label>
<input type="text" class="txt" name="mobile" vmodel="
regForm.mobile" />
<input type="button" value="点击发送短信验证码">
</li>
<li class="checkcode">
<label for="">验证码：</label>
<input type="text" name="regForm.code" />
</li>
<li>
<label for=""> </label>
<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同
意《用户注册协议》
</li>
<li>
<label for=""> </label>
<input type="submit" value="" class="login_btn" />
</li>
</ul>
</form>
</div>
<div class="mobile fl">
<h3>手机快速注册</h3>
<p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
<p><strong>1069099988</strong></p>
</div>
</div>
</div>
<!-- 注册主体部分end -->
</template>
<script>
export default {
layout:'main',
data:function () {
return {
regForm:{}
}
}
}
</script>
<style>
</style>
第六步：测试，成功
4 路由
4.1 静态路由
静态路由：没有参数的路由。
页面组件的访问方式如下：
4.2 动态路由
动态路由：带有参数的路由地址，比如：/goods/123、/orders/21/34等 。我们通过1个实例给大
家演示一下：
实例、 有一个商品页面，接收id做为参数，比如：/goods/123
1. 创建 goods/_id.vue 页面（id就是参数名）
2. 在 _id.vue 文件中使用 this.$route.params.id 来获取这个参数
console.log( this.$route.params.id )
4.3 参数的接收方式
我们向页面传参数常见的两种：
1. 用来唯一标识资源的参数写到路由上，比如：/goods/:id
2. 搜索、排序、翻页等的参数，比如：/goods/?limit=xx&page=xx
两种参数与文件名总结
练习、有一个 brands 页面，这个页面接收一个 catid 做为参数，页面对应的接口路由是：
/brands/:catid?limit=10
问：1. 这个页面在nuxt中对应的文件名 ？ 2. 在页面中如何接收catid这个参数 3. 在页面中如何接
收limit参数
答：
1. 文件名：pages/brands/_catid.vue
2. 接收catid参数：this.$route.params.catid
3. 接收limit参数：this.$route.query.limit