nuxtjs踩坑之旅

最近准备吧自己博客的进行V2 版本迭代，打算用vue+nuxtjs重构
创建项目自行查看文档https://zh.nuxtjs.org/guide/installation

1. 配置sass编译

安装npm包

yarn add @nuxtjs/style-resources node-sass sass-loader

• nuxt.config.js文件添加代码

   modules: [
        '@nuxtjs/style-resources'
    ],

测试 test.vue 文件(效果图略)

<style lang="scss" scoped>
.container {
  .demo {
    color: #000;
  }
}
</style>

2. 配置请求的baseUrl参数

• nuxt.config.js文件添加代码

   env: {
        baseUrl: process.env.NODE_ENV == 'development' ? 'http://localhost:3000/mapi' : 'http://www.ddd.cn'
    }
   

• 测试 test.js 文件
  任何文件都可以使用 process.env.baseUrl

import Http from '@/plugins/http/index'; // 封装axios请求
let API = process.env.baseUrl;

	 // 文章列表
    getArticleList(params = {}) {
        let url = `${API}/api/article/weblist`;
        return Http.get(url, params)
    },

3. Window 或 Document 对象未定义？

那个js文件有window就在那个文件添加一下代码

//  客户端
if (process.client) {
 ...your code
}
// 浏览器
if (process.browser) {
 ...your code
}

• 例子： 以wowjs为例子

if (process.browser) {
  var { WOW } = require("wowjs");
}

 if (process.browser) {
       let wow = new WOW({
         live: false
     });
      wow.init();
 }

4. proxy 代理

yarn add @nuxtjs/axios @nuxtjs/proxy

• nuxt.config.js文件添加代码

    modules: [
        "@nuxtjs/axios",
        "@nuxtjs/proxy"
    ],
    axios: {
        proxy: true,
        prefix: '/mapi/', // baseURL
        credentials: true,
    },
    proxy: {
        //开启代理
        "/mapi/": {
            target: "http://localhost:5454",
            pathRewrite: {
                "^/mapi/": ""
            }
        }
    },

5. router 的滚动行为

    router: {
        scrollBehavior: function(to, from, savedPosition) {
            // savedPosition 只有在 popstate 导航（如按浏览器的返回按钮）时可以获取。
            if (savedPosition) {
                return savedPosition
            } else {
                let position = { x: 0, y: 0 }
                    // 目标页面子组件少于两个
                if (to.matched.length < 2) {
                    // 滚动至页面顶部
                    position = { x: 0, y: 0 }
                } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
                    // 如果目标页面子组件中存在配置了scrollToTop为true
                    position = { x: 0, y: 0 }
                }
                // 如果目标页面的url有锚点,  则滚动至锚点所在的位置
                if (to.hash) {
                    position = { selector: to.hash }
                }
                return position
            }
        }
    },

6. js的文件引入

在plugins引入文件好处打包就一次，但是多个文件引入同一个文件就会打包多次
ssr 是否在服务端打包

    plugins: [
        { src: '~/plugins/http/index', ssr: true },
        { src: '~/plugins/http/api', ssr: true },
        { src: '~/assets/scripts/utils', ssr: false }
    ],

7. 全局引入css文件（@与～ 是一样的符号）

    css: [
        '@/assets/styles/common.scss',
        '@/assets/styles/reset.scss',
        '@/assets/styles/styles.scss',
    ],

8. Classic mode for store/ is deprecated and will be removed in Nuxt 3

• 出现原因（vuex经典模式写法将在Nuxt 3中删除, 代码中它对store做了一个是否是function的判断）

if (typeof store === 'function') {
	const log = (process.server ? require('consola') : console)
	return log.warn('Classic mode for store/ is deprecated and will be removed in Nuxt 3.')
}

• vue的经典写法如图所示
  
• 新版本的变化

1. 不需要 modules 目录，所有 modules 直接写出 xxx.js 就是模块了。
2. index中不需要 vue.use(vuex) 等模板代码了，全部由 nuxt 完成。
3. action 需要自己写，默认 nuxt会自动配置生成。直接调用即可。
4. state 需要是function，不能是object了

• 解决办法
  – 删除index.js文件,
  – store 文件下直接创建demo.js的moudles
  – state 变成function的写法
  

9. 如何创建路由

nuxtjs的强大就是你写完的文件，路由直接给你创建好了

• .nuxt/router.js 可以看到这个生成的路由信息
• 多级的路由具体参考文档 https://zh.nuxtjs.org/guide/routing

layout的使用（就是模版创建）

|— layouts
|-------- blank.vue
|-------- default.vue
俩中模版的创建，分别在test1.vue 和 test2.vue 的使用，会发现2种不同的布局方式

export default {
  name: "test1",
  layout: "blank", // default
};

未完待续。。。。。（如有表述错误，请告知，万分感谢）