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">&#xe623;</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);
});

路由传参问题

常用路由有两种传参方式：query 和 parame
1、query 和 parame 传参用法相同

this.$router.push({
	path: '跳转的路径',
  // query
  query: {},
  // parame
  parame: {}
})

2、接收 query 的参数

asyncData({query}) {
	return {id: query.id}//假设传过来的参数为 id，返回一个对象，在页面中直接 id 即可拿到传过来的参数
}

3、接收 parame 的参数
网上很多都用这个方式来接收参数

created() {
    this.id = this.$route.params.id;
},

亲测无效，我们可以输出 this.$route可以看到params这个对象的值是为空的，难道是值没有传过来吗于是我又输出this.$router 这个对象，通过查找，终于找到我们需要的参数

this.$router.history.current.query.id

我们沿着这个路径查找就可以看到我们所需要的参数就在这里

注意

1、根目录使用 “~” 来表示。例如需要引入 static 中的图片，则路径为："~/static/…"

2、项目根目录下的 .nuxt 文件夹，如果没有特别需求，最好不要修改里面的内容。（我之前有过修改里面的内容，当项目重新编译的时候，里面的内容又重新刷新且覆盖）

3、在使用变量进行 img(图片) 的 src 绑定时，路径必须使用 require() 函数进行处理，如：require(’~/static/image/bg.png’)

4、在使用 layout（模板）时，有一个小小需要注意的地方：
在 A 中，使用 layout，在 B 中引入 A，则模板不会编译有，但是直接打开 A 是有的。如果需要在 B 也显示模板，只能在 B 中也设置模板

5、在页面中监听 vuex 里面的变量时
如果在是这样写的，这样调用 methods 中的方法，会报错。当我们打印 this 对象时，可以看出不存在 this

watch: {
  getID: (n) => {
    console.log('watch', n);
    this.getCategoryID(n)
  }
},

这样写就可以了

watch: {
  getID(n) {
    console.log('watch', n);
    this.getCategoryID(n)
  }
},

持续更新中。。。

如果大家看到有错的地方还请在下方留言，我好更正过来，谢谢大家哦