目录

安装Node

1:先安装node :http://nodejs.cn/download/ ,然后直接下一步安装就可以 ，然后node -versino 查看是否安装成功

什么是NUXT

一、NUXT环境初始化

1、下载压缩包

2 .解压后放到 vscode的工作区

3、修改package.json

4、修改nuxt.config.js

5、在命令提示终端中进入项目目录

6、安装依赖 命令

7、测试运行 ,控制台打印警告没事，别打印error就行

8、NUXT目录结构,以后vue页面写在pages里面

二、幻灯片插件

1、安装插件，这块安装有问题可能是版本的问题，我别的文章中有解决办法

2、配置插件

 三、 页面布局

1、复制静态资源

2、修改layouts目录下default.vue，修改pages/index.vue 参照项目

四：路由

1、固定路由 ，参考项目pages目录

2、动态路由，参考项目pages目录

五、封装axios

6、创建api文件夹，里面创建文件，是写axios 请求文件

像vue-admin-teamplate的 项目结构一样

安装Node

1:先安装node :http://nodejs.cn/download/ ,然后直接下一步安装就可以 ，然后node -versino 查看是否安装成功

什么是NUXT

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

一、NUXT环境初始化

1、下载压缩包

https://github.com/nuxt-community/starter-template/archive/master.zip

2 .解压后放到 vscode的工作区

3、修改package.json

name、description、author（必须修改这里，否则项目无法安装）

4、修改nuxt.config.js

修改title: '{ { name }}'、content: '{ {escape description }}'

这里的设置最后会显示在页面标题栏和meta数据中

5、在命令提示终端中进入项目目录

6、安装依赖 命令

npm install

7、测试运行 ,控制台打印警告没事，别打印error就行

npm run dev 

8、NUXT目录结构,以后vue页面写在pages里面

（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节点下

  plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],

  css: [
    'swiper/dist/css/swiper.css'
  ],

 三、 页面布局

1、复制静态资源

2、修改layouts目录下default.vue，修改pages/index.vue 参照项目

四：路由

1、固定路由 ，参考项目pages目录

（1）使用router-link构建路由，地址是/course   

（2）在page目录创建文件夹course ，在course目录创建index.vue

2、动态路由，参考项目pages目录

（1）创建方式

如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名

在pages下的course目录下创建_id.vue

五、封装axios

我们可以参考guli-admin将axios操作封装起来

下载axios ，使用命令 npm install axios

创建utils文件夹，utils下创建request.js

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:9001', // api的base_url
  timeout: 20000 // 请求超时时间
})
export default service

6、创建api文件夹，里面创建文件，是写axios 请求文件

像vue-admin-teamplate的 项目结构一样