Nuxt.js 的使用
安装
1、nuxt.js 基于 vue 因此使用 vue 进行项目创建，nuxt.js 官方提供一个模板，我们就以这个模板进行 nuxt 项目的创建。其创建代码为：
vue init nuxt-community/starter-template '你的项目名称'
回车之后会进行模板下载，务必联网；
模板下载好之后，会让你填写一些基本信息，可以直接回车选择默认就好，如下图：
模板的目录结构如下：
node_modules 文件夹是需要我们安装依赖之后才有的；
2、安装依赖
进入到项目根目录，依赖安装：
npm install
如果依赖安装成功则会出现以下图标：
3、运行 nuxt.js 项目
经过以上两个步骤之后，我们就可以运行 nuxt.js 项目了；
在项目根目录下，运行：
npm run dev
等待项目运行。。。。
nuxt.js 项目成功运行会给出一个默认地址：http://localhost:3000/
把网址复制到页面中，就可以看到这样的一个页面：
这样，我们的 nuxt.js 项目就正式创建完成了，接下就是编码了；
目录结构讲解
.nuxt 里面是放置 nuxt 项目的配置信息，最好不要动
assets 会放置一些静态资源，如 js 文件，SASS，LESS 文件等；
components 专门放置页面中的组件；
layouts 专门放置项目的模板；
middleware 专门放置项目的中间件；
pages 专门放置项目的页面；
plugins 专门放置项目的插件；
static 主要放置项目的静态资源，如图片；
store 用于项目的 vuex 状态文件；
nuxt.config.js 项目的配置文件，比较重要；
package.json 里面主要是项目的依赖关系；
引入 Iconfont(阿里图标)
1、将项目下载到本地（省略阿里图标库的项目创建和添加图标。。。）
2、解压之后将所有文件复制到项目中去
我将图标文件放到 static 文件夹下，新建一个 font 文件夹，将所有解压的文件放到 font 中
3、图标配置
在 nuxt.config.js 文件中进行图标的配置
4、图标在页面中的使用
在代码中使用
<i class="iconfont"></i>
图标在页面中的显示
引入 Element-UI
1、使用 npm 进行 elemnt-ui 安装
npm i element-ui -S
2、在 plugins 文件夹下创建 element-ui.js 文件（plugins 文件夹是专门放插件的）
在文件中进行全局引入
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI);
3、在 nuxt.config.js 中添加配置
css: [
'element-ui/lib/theme-chalk/index.css' // 引入全局样式
],
plugins: [
{src: '~/plugins/ElementUI', ssr: false }
],
build: {
vendor: ['element-ui'] // 防止重复打包
}
4、测试一下看看是否可以
在页面中使用
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
页面中显示
http 请求（简易用法）
1、安装
npm install @nuxtjs/axios
2、nuxt.config.js 配置
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
baseURL: '需要请求的URL', // 如：http://www.baidu.com
}
}
3、在代码中使用
// 以 GET 为例，其他请求用法相同
this.$axios.$get('后端给的接口').then(res => {
/* 在这里将值取出来 */
console.log(res);
});
项目打包和运行
1、进入到项目根目录下，用一下命令进行打包
npm run build
2、当控制台命令执行结束时，我们看到原来的项目目录结构并没有发生什么变化，这时我们将一下四个文件单独放到另外一个文件夹下
3、我们到那四个文件的根目录下运行安装依赖
npm install
安装之后的目录结构如下
4、在根目录下运行打包之后的 nuxt 项目
npm start
利于 SEO
要想利于 SEO 就要在组件渲染之前就将数据获取到;
因此页面的所有请求必须放在 asyncData 函数里面，这个函数是 Nuxt 框架独有的，专门为了 SEO 设计;
该函数是在组件渲染之前就会执行，因此在这个函数内部是不能使用 this 关键字获取全局变量或方法；
asyncData 官网介绍（传送门）
简单实例：
/*
参数介绍：
只有一个参数时：
asyncData(context)：该参数就是当前页面的上下文对象，也就是我们常用的 this
有多个参数时：
asyncData({app, query, store})：默认第一个参数是上下文对象，当前这个例子中的第二个参数是获取别的页面传来参数，当前例子中的第三个参数是 状态管理
*/
async asyncData({app, query, store}) {
// 两个请求
let [res1, res2] = await Promise.all([
app.$http.getA(),
app.$http.getB(),
])
// res1 res2 就是请求到的结果，还可以增加多几个请求。
// 想要把该函数内的数据传出去，就要将数据通过 return 返回回去。return 返回的数据必须是json数据，并且键值必须在 data 内已经定义过的
return {
id: aid, // aid 是asyncData函数内的数据
// id 是把 aid 的值带出去
}
}
注意：
当我们只有一个请求的使用，也要写 []
例：
let [res1] = await Promise.all([
app.$http.getA(),
])
注意：
如果使用 setTimeout 来控制页面的延时显示，千万不要使用 v-if 来控制。
nuxt 项目去掉页面源代码 window.NUXT
之前在网上看到很多大佬说 屏蔽 掉3行代码可以达到效果，不过会出现一些问题，像 store 。。。。
通过摸索，我发现 **屏蔽 **这一行代码也可以达成去掉页面源代码 xindow._ NUXT_ 的效果，可能项目功能比较小，因此并未发现项目出现问题。
node_modules/@nuxt/vue-renderer/dist/vue-renderer.js
搜索：${serializedSession}
**这个文件必须是在服务器上的文件
**
后续持续观察，如发现问题，立即更新。。。
路由
nuxt 的路由是框架自动生成的，相关规则（官网传送门）
路由跳转方式
方式一：使用标签跳转
<nuxt-link to="/index">首页</nuxt-link>
方式二：使用 js 进行跳转
1.
// 在 asyncData 方法内跳转，这个方法是在页面没有挂载之前就调用的，所以不存在 this，但它的参数是有可以使用的，它的第一个参数就表示页面上下文
asyncData({app}) // 这里是结构出 app 这个变量出来，这里的 app 就相当于 this
2.
在一般方法页面跳转的方式和vue是一样的
注意
1、根目录使用 “~” 来表示，如“~/assets/a.png。static 文件夹比较特殊，引用路径为：“/a.png”
2、项目根目录下的 .nuxt 文件夹，当项目重新编译的时候，里面的内容会重新刷新且覆盖
3、在使用变量进行 img(图片) 的 src 绑定时，路径必须使用 require() 函数进行处理，如：require(‘~/static/image/bg.png’)
4、在使用 layout（模板）时，有一个小小需要注意的地方：
在 A 中，使用 layout，在 B 中引入 A，则模板不会编译有，但是直接打开 A 是有的。如果需要在 B 也显示模板，只能在 B 中也设置模板
持续更新中。。。
个人博客 http://www.sharekong.xyz 欢迎访问
开通会员以解锁全部内容