• nuxt重构网站学习记录


    最近在重构一个vue多页面网站,选择用nuxt.js来重构项目,下面是重构过程中的一些记录,

    不同的nuxt版本会有出入,所以先说明下我当前使用的版本是 2.15.8 版本

    一、配置typescript

    一直都没有用过typescript,决定在新项目里使用看看,先给它添加了typescript支持,按照 https://typescript.nuxtjs.org/guide/setup/ 文档里的步骤添加,

    1、

    yarn add --dev @nuxt/typescript-build @nuxt/types

    2、修改 nuxt.config.js, 添加tsconfig.json

    二、给nuxt配置sass

    node-sass 和 sass-loader 需要对应版本,默认安装不加版本号,会自动安装最新的版本,我第一次使用

    yarn add --dev node-sass sass-loader --registry=https://registry.npm.taobao.org

    安装下来的是,node-sass的6.0.1  和 sass-loader 的 12.1.0版本,然后执行 yarn dev,命令行里报错  TypeError: this.getOptions is not a function at Object.loader,搜索后提示是 sass-loader 版本过高

    经过几次试验,改为下载 sass-loader 的 10.1.1版本成功运行,命令是

    yarn add --dev sass-loader@10.1.1 --registry=https://registry.npm.taobao.org

    接着安装 @nuxtjs/style-resources

    yarn add @nuxtjs/style-resources --registry=https://registry.npm.taobao.org

    然后配置nuxt.config.js

    module.exports = {
        // Other nuxt.config.js
       
        modules: ['@nuxtjs/style-resources'],
        styleResources: {
            scss: [
                'assets/css/global.scss',
                'assets/css/main.scss'
            ]
        }
    }

    sass就安装成功了

    三、

    当在scope样式中使用/deep/飘红报错时,可以使用::v-deep代替

    <style lang="scss" scoped>
    ::v-deep {
      .van-index-anchor {
        padding: 0;
      }
    }
    </style>

    这和/deep/是一样的效果。

    四、引入jquery和其他第三方js文件

    1、把jquery和其他第三方js文件放到 static 目录下

    2、修改nuxt.config.js文件,加入以下代码

    head: {
        // 其他配置项
        script: [
            { src: '/jquery-1.11.3.min.js' },
            { src: '/slides.js' }
        ]
    },

    3、在组件中加入代码

    mounted () {
        $("body").append("xxx");
    }

    注意问题

    1:引用时,不需要添加/static目录,因为/static目录编译后会被映射到/目录

    2:组件中要写在 mounted 里,不能写在 created 里

    参考资料

    1、https://blog.csdn.net/just4you/article/details/108866048

    2、https://www.huanggr.cn/1754.html

    3、https://www.h5w3.com/62794.html

    五、使用vuex

    在 store 目录里新建一个 index.js

    参考资料:

    1、https://nuxtjs.org/docs/2.x/directory-structure/store

    2、https://www.cnblogs.com/jin-zhe/p/9932011.html

    ps:

    报错处理

    1、

    如果浏览器里的console报这个错,一个可能原因是有些dom节点只能在客户端渲染,需要把这些dom包裹在 <client-only> 里

    六、引入vue3的新功能

    1、添加 @vue/composition-api 依赖

    yarn add @vue/composition-api 

    2、在 plugins 文件夹里新建  composition-api.js 文件

    import Vue from 'vue'
    import VueCompositionApi from '@vue/composition-api'
    
    Vue.use(VueCompositionApi)

    3、在 nuxt.config.js 里引入 composition-api.js 文件

    plugins: [
        xxx,
        '~/plugins/composition-api',
      ],
  • 相关阅读:
    Angular InjectionToken
    ionic 使用入门
    EFcore 横向分表
    .Netcore 默认认证授权
    anut 设计资源
    Aunt entity
    百度人脸真人认证
    Angular 省市区级联
    apache安装
    ppb|ppm
  • 原文地址:https://www.cnblogs.com/yuewangshanren/p/15261616.html
Copyright © 2020-2023  润新知