乘风原创程序

  • Nuxt.js 的详细使用以及踩的坑
  • 2020/9/28 15:44:41
  • 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. r o u t e 可 以 看 到 p a r a m s 这 个 对 象 的 值 是 为 空 的 , 难 道 是 值 没 有 传 过 来 吗 于 是 我 又 输 出 t h i s . route 可以看到 params 这个对象的值是为空的,难道是值没有传过来吗 于是我又输出 this. routeparamsthis.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