Nuxt.js 的详细使用以及踩的坑

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)
  }
},

持续更新中。。。

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

本文地址：https://blog.csdn.net/qq_43390928/article/details/108848046