整合NUXT
什么是NUXT？
一种服务端渲染技术
1、什么是服务端渲染
服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
服务端渲染的优势是更容易被展示在搜索后显示，因为搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，从而更容易被展示出来
2、什么是NUXT
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用。
官网网站：
安装NUXT
1、下载压缩包
2、解压
将template中的内容复制到 guli
3、安装ESLint
将guli-admin项目下的.eslintrc.js配置文件复制到当前项目下
4、修改package.json
name、description、author（必须修改这里，否则项目无法安装）
perl
复制代码
"name": "guli",
"version": "1.0.0",
"description": "谷粒学院前台网站",
"author": "pyy <55317332@qq.com>",
5、修改nuxt.config.js
修改title: '{{ name }}'、content: '{{escape description }}'
这里的设置最后会显示在页面标题栏和meta数据中
head: { title: '谷粒学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'keywords', name: 'keywords', content: '谷粒学院,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频' }, { hid: 'description', name: 'description', content: '谷粒学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] },
6、在命令提示终端中进入项目目录
7、安装依赖
npm install
8、测试运行
npm run dev
9、NUXT目录结构
（1）资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
（2）组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
（3）布局目录 layouts
用于组织应用的布局组件。
（4）页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
（5）插件目录 plugins
用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
幻灯片插件
1、安装插件
npm install vue-awesome-swiper
2、配置插件
在 plugins 文件夹下新建文件 nuxt-swiper-plugin.js，内容是
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr' Vue.use(VueAwesomeSwiper) 在 nuxt.config.js 文件中配置插件 将 plugins 和 css节点 复制到 module.exports节点下
页面布局
1、复制静态资源
将静态原型中的css、img、js、photo目录拷贝至assets目录下
将favicon.ico复制到static目录下
2、定义布局
我们可以把页头和页尾提取出来，形成布局页
修改layouts目录下default.vue，从静态页面中复制首页，修改了原始文件中的资源路径为~/assets/，将主内容区域的内容替换成<nuxt />
内容如下：
3、定义首页面
修改pages/index.vue：
修改了原始文件中的资源路径为~/assets/
路由
1、固定路由
点击，跳转。跳转的路径是固定的
2、动态路由
如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
在pages下的course目录下创建_id.vue
封装axios
为了更好的操作ajax，我们用axios来操作
我们参考guli-admin将axios操作封装起来
下载axios ，使用命令 npm install axios
创建utils文件夹，utils下创建request.js
import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: 'http://localhost:8201', // api的base_url timeout: 20000 // 请求超时时间 }) export default service
整合教师页面和课程页面
就是复制两个vue页面
然后分别定义两个动态路由页面
