ian.liu
ian.liu

Nuxt.js 从搭建到发布

一个基于 Vue.js的服务端渲染应用框架 ，nuxt 解决了SPA的通病（首屏白屏，SEO）

文章目录

        • 1. 搭建Nuxt
          • 1.1 快速入门
          • 1.2 资源目录
          • 1.3 生命周期
        • 2. 配置Nuxt
          • 2.1 引入UI框架
          • 2.2 引入中间件
          • 2.3 引入国际化
          • 2.4 引入第三方插件
          • 2.5 引入axios.js
          • 2.6 加载静态资源
        • 3. 开发Nuxt
        • 4. 调试Nuxt
          • 4.1 界面调试
          • 4.2 JS调试
          • 4.3 代理跨域
        • 5. 性能优化方案
          • 5.1 UI框架按需引入
          • 5.2 服务端渲染数据
          • 5.3 组件异步加载
          • 5.4 JS按需加载
          • 5.5 其它优化方案
          • 5.6 完整的nuxt.config.js
        • 6. 发布Nuxt
          • 6.1 打包
          • 6.2 发布

1. 搭建Nuxt

1.1 快速入门

​ 为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app

​ 确保安装了npx（npx在NPM版本5.2.0默认安装了），详细查询官网教程

$ npx create-nuxt-app <项目名>

​

1.2 资源目录

项目完整资源目录

Nuxt.js 从搭建到发布_第1张图片

​ api：express 目录

​ assets：公共资源目录（.js .css .jpg）

​ components：公共组件目录

​ layouts：页面入口目录（default.vue 类似vue里的App.vue）

​ locales：国际化语言包文件目录

​ middleware：中间件目录

​ pages：页面级目录

​ plugins：公共插件目录

​ static：静态资源目录

​ store：vuex目录

​ .eslintrc.js：ESlint 代码检测工具配置文件

​ .gitignore：git上传规则配置文件

​ nuxt.config.js：nuxt 规则配置文件

​ package.json：npm 依赖包配置文件

​

1.3 生命周期

  • nuxt 生命周期
    Nuxt.js 从搭建到发布_第2张图片

  • nuxt context 思维导图

    Nuxt.js 从搭建到发布_第3张图片

2. 配置Nuxt

2.1 引入UI框架

  1. UI框架使用的是ant-design-vue： 支持自定义主题颜色和组件国际化等

    $ npm install --save ant-design-vue

  2. 创建插件目录plugins，添加antd.js：Vue全局引入ant-design-vue，开发时可直接使用框架组件

    Nuxt.js 从搭建到发布_第4张图片

    // antd.js
import Vue from 'vue'
import antd from 'ant-design-vue'

Vue.use(antd)

  3. 配置nuxt.config.js：引入antd.js，可自定义ant-design-vue框架主题颜色

    // nuxt.configs.js
module.exports = {
    /**
     * 第三方插件
     */
    plugins: [
        {src: '~/plugins/antd.js', ssr: true},
    ],
    /**
     * 编译配置
     */
    build: {
        extend (config, ctx) {
            /**
             * 自定义 ant-design-vue 主题颜色
             */
            config.module.rules.push({
                test: /\.less$/,
                use: [{
                    loader: 'less-loader',
                    options: {
                        modifyVars: {
                            'primary-color': '#2EA9DF',
                            'link-color': '#2EA9DF',
                            'border-radius-base': '4px'
                        },
                        javascriptEnabled: true
                    }
                }]
            })
        }
    }
}
2.2 引入中间件

中间件包含路由守卫、国际化等

  1. 创建中间件目录middleware，添加route.js

    // route.js
export default ({req}) => {
    // 服务端渲染时
    if (process.server) {
       // 业务逻辑
    }
     // 客户端渲染时
    if (process.client) {
        // 添加路由守卫，动态改变路由的跳转
        app.router.beforeEach((to, from, next) => {
			// 业务逻辑
        })
    }
}

  2. 配置nuxt.config.js，引入route.js

    // nuxt.configs.js
module.exports = {
    /**
     * 中间件拦截器
     */
    router: {
        middleware: ['route']
    }
    /**
     * 第三方插件
     */
    plugins: [
        {src: '~/plugins/antd.js', ssr: true},
    ],
    /**
     * 编译配置
     */
    build: {
        extend (config, ctx) {
            /**
             * 自定义 ant-design-vue 主题颜色
             */
            config.module.rules.push({
                test: /\.less$/,
                use: [{
                    loader: 'less-loader',
                    options: {
                        modifyVars: {
                            'primary-color': '#2EA9DF',
                            'link-color': '#2EA9DF',
                            'border-radius-base': '4px'
                        },
                        javascriptEnabled: true
                    }
                }]
            })
        }
    }
}
2.3 引入国际化

界面静态文字根据国际化动态切换语言，附上官网教程

  1. 创建目录 locales，添加index.js和需要的国际化 *.json

    Nuxt.js 从搭建到发布_第5张图片

    // index.js
export default () => ['zh_TW', 'zh_CN', 'en_US']

  2. 创建目录store，添加index.js：nuxt默认集成vuex，会自动检测store是否存在

    在这里插入图片描述

    // index.js
import Locale from '~/locales'

/**
 * 全局变量
 * @returns {{locales, locale: *}}
 */
export const state = () => ({
    locales: Locale(),
    locale: Locale()[0],
})

export const mutations = {
    /**
     * @param locale 当前选中的国际化标识
     * @constructor
     */
    SET_LANG (state, locale) {
        if (state.locales.indexOf(locale) !== -1) {
            state.locale = locale
        }
    }
}

export const actions = {
    /**
     * @param commit 国际化修改
     * @param val 国际化标识
     */
    updateLang ({commit}, val) {
        commit('SET_LANG', val)
    },
}

  3. 添加中间件 i18n.js：校验客服端传递的国际化标识，动态渲染界面文字

    在这里插入图片描述

    // i18n.js
import Tool from '~/assets/utils/tool'  // 服务端从request获取Cookie的工具
export default function ({ isHMR, app, store, route, params, error, redirect, req }) {
    let cookies = Tool.getcookiesInServer(req)
    let languageCookie = cookies.language ? cookies.language : null
    const defaultLocale = app.i18n.fallbackLocale
    // If middleware is called from hot module replacement, ignore it
    if (isHMR) return
    // Get locale from params
    const locale = params.lang || defaultLocale
    if (store.state.locales.indexOf(locale) === -1) {
        return error({ message: 'This page could not be found.', statusCode: 404 })
    }
    // Set locale
    store.commit('SET_LANG', store.state.locale)
    app.i18n.locale = languageCookie || store.state.locale
    // If route is //... -> redirect to /...
    if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
        const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
        const re = new RegExp(toReplace)
        return redirect(
            route.fullPath.replace(re, '/')
        )
    }
}

  4. 添加插件 i18n.js：Vue全局引入i18n，可以在DOM中使用{{$t(...)}}，JS中使用this.$t(...)获取国际化文字

    Nuxt.js 从搭建到发布_第6张图片

    // i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookie from 'js-cookie'

Vue.use(VueI18n)

export default ({ app, store }) => {
    let data = {}
    let Locale = store.state.locales
    for (let i = 0; i < Locale.length; i++) {
        data[Locale[i]] = require(`~/locales/${Locale[i]}.json`)
    }
    // Set i18n instance on app
    // This way we can use it in middleware and pages asyncData/fetch
    app.i18n = new VueI18n({
        locale: Cookie.get('language') || store.state.locale,
        fallbackLocale: Cookie.get('language') || store.state.locale,
        messages: data
    })
    // 自定义页面跳转方法
    app.i18n.path = (link) => {
        return `/${app.i18n.locale}/${link}`
    }
}

  5. 配置Nuxt.config.js：引入插件i18n.js

    // nuxt.configs.js
module.exports = {
    /**
     * 中间件拦截器
     */
    router: {
        middleware: ['route','i18n']
    }
    /**
     * 第三方插件
     */
    plugins: [
        {src: '~/plugins/antd.js', ssr: true},
     	{src: '~/plugins/i18n.js', ssr: true}
    ],
    /**
     * 编译配置
     */
    build: {
        extend (config, ctx) {
            /**
             * 自定义 ant-design-vue 主题颜色
             */
            config.module.rules.push({
                test: /\.less$/,
                use: [{
                    loader: 'less-loader',
                    options: {
                        modifyVars: {
                            'primary-color': '#2EA9DF',
                            'link-color': '#2EA9DF',
                            'border-radius-base': '4px'
                        },
                        javascriptEnabled: true
                    }
                }]
            })
        }
    }
}
2.4 引入第三方插件

  • 全局引入：配置nuxt.config.js，添加资源文件的路径

    // nuxt.config.js
module.exports = {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
      // 不对

你可能感兴趣的:(nuxt)

  • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
    title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
  • 【前端】Vue服务器端渲染之Nuxt irenb
    1.什么是服务器端渲染后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。总结：数据填充在服务器端进行，就是服务器端渲染什么是客户端渲染数据由浏览器通过ajax动态获得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染。总结：数据填充在客户端进行，就是客户端渲染服务器端渲染vs客户端渲染服务器端渲染需要消
  • tensorflow和python不兼容_tensorflow与numpy的版本兼容性问题的解决 weixin_39727934
    在Python交互式窗口导入tensorflow出现了下面的错误：ox8免费资源网root@ubuntu:~#python3Python3.6.8(default,Oct72019,12:59:55)[GCC8.3.0]onlinuxType"help","copyright","credits"or"license"formoreinformation.>>>importtensorflowas
  • numpy python 兼容_tensorflow与numpy的版本兼容性问题 weixin_39761822 numpypython兼容
    在Python交互式窗口导入tensorflow出现了下面的错误：root@ubuntu:~#python3Python3.6.8(default,Oct72019,12:59:55)[GCC8.3.0]onlinuxType"help","copyright","credits"or"license"formoreinformation.>>>importtensorflowastf;/usr/
  • 【网络安全】URL解析器混淆绕过CSP实现XSS 秋说 网络安全web安全xss漏洞挖掘
    未经许可，不得转载。文章目录前言正文前言许多流行的静态网站生成器都存在图像CDN功能，它们通过优化网站中的图像来加快页面加载速度。例如：1、OptimizingImages|Next.js利用内置的next/image组件优化图像（nextjs.org）2、NuxtImage:Nuxt应用的图像优化即插即用的图像优化功能，使用内置优化器对图像进行调整（image.nuxt.com）这些工具的目标都
  • uniapp中使用pinia，并做数据持久化 Terminal丶句点 小程序uniapppiniapinia小程序vue.js
    安装依赖pnpmipiniapinia-plugin-persistedstate@nuxt/devalue-S创建store文件夹，创建持久化插件/store/plugins.tsimport{App}from'vue'import{createPinia}from'pinia'importdevaluefrom'@nuxt/devalue'import{createPersistedState
  • nuxt3模拟手机验证码 结城明日奈是我老婆 #nuxtjsjavascript开发语言ecmascript
    文章目录前言前端后端前面代码会出现的问题约束button的小插件连接mongodb来写登陆项目开源链接前言真实应该要连接短信验证码服务，但是众所周知所有的服务和IT都是靠服务来挣钱的，所以我们目前只能模拟手机验证码登陆考虑到账号的唯一值就想到了手机和验证码(基本上的网站都会使用)但是输入手机号后有"获取验证码"的操作，这个操作就是需要供应商支持(交钱)但是身无分文的我又没有像别人一样有收入来源所以
  • vue nuxt scss node express MongoDB 实现的简单文章发布系统 qq_36320160 前端Node.jsVue.jsMongoDBExpress
    mynuxt是一个文章增删改查系统因为目前的spa单页项目对seo很不友好，如果你希望自己的网站在seo这块有较好的支持，可以尝试一下SSR技术，nuxt.js就是专门针对vue这一问题实现的技术，因此这一次我就尝试写了一个项目，主要实现的一个简单的文章的增删改查系统，主要为实现nuxt集合node实现ssr功能。新人可以学习下https://github.com/ITCNZ/mynuxt（如果觉
  • 阿里云部署nuxt3+mongodb 打工很辛苦吧 阿里云mongodb
    文章目录阿里云部署nuxt3+mongodb一、云服务器安装mongodb二、mongodb添加管理员用户三、nuxt3使用mongodb四、使用pm2管理nodejs进程，运行nuxt3mongodb安装的参考文章阿里云服务器上部署node和mongodb教程阿里云部署nuxt3+mongodb一、云服务器安装mongodb安装#选择要安装的路径#之前nginx安装到etc下，我这里和mongo
  • nuxt3连接mongodb操作 Rverdoser mongodb数据库
    在Nuxt3中连接MongoDB并进行操作，你可以使用nuxtServerInit生命周期钩子来初始化数据库连接，并在组件中使用Vue的setup函数来执行数据库操作。以下是一个简单的例子：安装nuxt和mongodb的Node.js驱动：npminstallmongodb@nuxt/kit在nuxt.config.ts中配置你的MongoDB连接字符串：exportdefaultdefineNu
  • nuxt3+vue3+vite+TS实现国际化 富朝阳 Nuxt.jsVuenuxt3国际化vue-i18nvue3国际化nuxt.js
    前言博主最近打算用Nuxt3重构了自己SSR博客，打算添加国际化功能，众所周知，实现国际化已是一个很常见的功能。用户可以根据自己的喜好，设置页面的自己合适的语言，从而实现国际化浏览。这样用户体验度会大大提升。博客用的nuxt3+vue3+vite+TS实现国际化，国际化用的vue-i18n，下面我给大家详细介绍。一、安装依赖#npm安装依赖npmivue-i18nnpmi@nuxtjs/i18n@
  • Nuxt3入门：样式的注入、定义和使用（第3节） 沐爸muba Vuevue前端
    你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。Nuxt在样式方面非常灵活。可以自定义样式，或引用本地和外部样式表，或使用CSS预处理器、CSS框架、UI库和Nuxt模块来设置应用程序的样式。一、在组件中注入本地样式表本地样式表放在assets/目录下，可以使用~/assets/别名来引用它们。你可以直接在页面、布局和组件中导入样式表，你可以使用javascript导入或css@import导入。
  • Nuxt3入门：路由系统（第4节） 沐爸muba Vuevue.js前端
    你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。Nuxt的一个核心功能是文件系统路由器，路由是根据文件自动注册的，Nuxt为在pages/目录下的每个Vue文件创建相应的路由（或URL）。一、用法页面是Vue组件，可以具有Nuxt支持的任何有效扩展，默认情况下是.vue，也可以是.js.jsx.mjs.ts.tsxNuxt将自动为pages目录的下每个页面创建一个路由。pages/index.vu
  • vue2/3 - 解决项目运行或安装依赖npm install时，出现报错 errno -4048 | Error: EPERM: operation not permitted, mkdir错误 街尾杂货店& 前端常见问题解决前端组件与功能(开箱即用)vue.jsnuxt.jsnpminstall报错errno-4048operationnotpnode_modules清掉缓存删掉npmrc无效
    错误截图在vue2|vue3|nuxt项目开发中，运行或执行安装依赖包命令install时出现报错：npmERR!errno-4048|npmERR!Error:EPERM:operationnotpermitted,mkdir‘xxx’，终端满屏报错且无法安装生成node_modules，并且清除缓存和删除对应文件都无法解决，本文提供完美的方案保解决。其他教程都无法解决，本文提供的解决方案完美搞
  • linux网络流程分析（一）---网卡驱动 wang603603 linuxlinux
    转载：https://www.cnblogs.com/gogly/archive/2012/06/10/2541573.html分析linux网络的书已经很多了，包括《追踪LinuxTCP/IP代码运行》《Linux内核源码剖析——TCP/IP实现》，这里我只是从数据包在linux内核中的基本流程来分析，尽可能的展现一个主流程框架。内核如何从网卡接收数据,传统的过程：1.数据到达网卡；2.网卡产生
  • 【来来来，我看看是谁不点我】Nuxt3入坑记--JS版 Bug从此不上门 javascript开发语言ecmascript
    为什么选择Nuxt3呢？老板说要上SSR紧跟潮流Nuxt3对于没有SSR经验的同学来说，是一个不错的选择，简单易用上手轻松。Nuxt3官方地址Nuxt3生态圈Nuxt3官方案例Nuxt3具有什么优势呢？开发更快打包更小支持vite支持vue3支持自动引入支持文件路由支持布局系统支持多种渲染模式支持typescript支持composition-apiNuxt3目录结构#目錄說明#.nuxt本地运行
  • Nuxt3 全局变量接口前缀全局配置，全局方法，全局状态管理 凉豆菌 Nuxt3前端vue.jsjavascript
    接口前缀全局配置，全局变量1.像api前缀这类的全局变量一般配置在nuxt.config.ts文件中。如下：nuxt.config.ts可以在public下定义全局变量，且public下的变量可以在客户端和服务端使用在其他任意vue或者js、ts文件中，可通过以下方式获取变量const{public:{apiBase}}=useRuntimeConfig()全局状态管理1、全局变量共享在根目录下新
  • Vue2 - 详细实现解析富文本内容生成侧边栏Toc目录索引，识别富文本内容根据标题h1~h6自动生成文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，鼠标滚动内容滑过锚点时高亮对应标题 王佳斌 +Vuevue2.jsnuxt2.js根据富文本内容自动生成目录方法根据h标签标题做侧边栏导航目录vue读取富文本中的h1标题博客文章资讯新闻文章富文本富文本和目录相互联动高亮菜单
    前言如果您需要Vue3版本，请访问这篇文章。在vue2|nuxt2项目开发中，详解实现“解析识别富文本内容，并在侧边栏动态生成文章目录”，对富文本内的h1~h6标题进行读取分析（可自定义要读取的标签，支持多级标题嵌套渲染），然后在指定位置生成渲染富文本对应的文章锚点目录TOC，点击目录导航菜单时会跳转到文章内容对应的标题锚点位置并且有过渡跳转动画，另外用户浏览富文本滚动经过标题锚点时右侧目录会自动
  • Vue或Nuxt中如何渲染数学公式？ Ricciflows vue.js前端javascript
    在网页上，有很多种方法可以渲染漂亮的数学公式。但是这些方法基本上不能直接应用于Vue.js或者Nuxt.js。在本文中，我们将分别说明如何在Vue.js或者Nuxt.js中使用katex和mathjax渲染数学公式。Katex想要自动渲染所有页面上的数学公式，你需要使用CDN来加载katex：Manitori如果你使用的是Nuxt.js，那么你需要修改你的nuxt.config.ts：//nuxt
  • npm run build报错：Some chunks are larger than 500 KiB after minification Ricciflows npm前端node.jsvue.js
    当你的Vue/Nuxt项目太大，那么使用npmrunbuild生成项目的时候，就有可能会遇到以下报错：WARN15:32:15(!)Somechunksarelargerthan500KiBafterminification.Consider:-Usingdynamicimport()tocode-splittheapplication-Usebuild.rollupOptions.output.
  • vue2 - 详细实现用户收货地址识别解析“姓名/手机号/省市区/街道/乡镇村庄“关键字，用户复制粘贴一段含有姓名电话/详细地址的文字文本信息，vue3自动识别拆分并填入到对应表单字段中，详细示例代码 街尾杂货店& 前端组件与功能(开箱即用)vue2nuxt2识别到电话号码姓名地址提取出来电商购物平台中粘贴一段文字识别如何判断文本中含有的省市区地址识别快递地址中含有的姓名手机号收货地址解析识别手机号地址姓名
    效果图在vue2、nuxt2项目开发中，实现手机H5移动端网页/电脑PC端网站，“快递地址解析拆分姓名/电话/省市区地址/详细街道乡镇村庄”，提取文本内容中的手机号名称详细位置信息填充到指定表单或data数据中进行处理，解析拆分电商购物平台中，发货物流地址一段文字中含有的关键信息，常见淘宝、京东、拼多多等电商平台只要涉及到收货地址/姓名手机号的文本识别都适用，识别免费可靠，提供详细示例源码。提供详
  • blog-engine-06-pelican 静态网站生成 支持 markdown 和 reST 语法 老马啸西风 java
    拓展阅读blog-engine-01-常见博客引擎jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman对比blog-engine-02-通过博客引擎jekyll构建githubpages博客实战笔记blog-engine-02-博客引擎jekyll-jekyll博客引擎介绍blog-engine-02-博客引擎jekyll-jekyl
  • linux 3 个 profile 配置文件区别? /etc/profile + .bashrc + .bash_profile 老马啸西风 linuxlinux
    linux命令汇总命令描述地址linuxtop实时查看系统性能linuxtop-linux内存linuxtargz解压命令linuxtargz解压命令linuxtail显示文件末尾内容linuxtail,linuxheadlinuxrm删除文件或目录linuxrm,mkdirlinuxpwd显示当前目录linuxpwdlinuxps显示当前进程信息linuxpslinuxport显示端口占用情况l
  • vue element plus Cascader 级联选择器 跟Bug双向奔赴 vue.jselementuijavascript
    当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。TIP在SSR场景下，您需要将组件包裹在之中(如:Nuxt)和SSG(e.g:VitePress).基础用法#有两种触发子菜单的方式只需为Cascader的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger属性控制子节点的展开方式Childoptionsexpandwhenclicke
  • Astro + NextUI 搭建个人博客（导航组件篇）
    Astro简介由于我之前的个人博客是Vue3+Quasar+Koa+MySql搭建的，整体就是SPA的思路，作为练手倒是可以锻炼前后端各方面的能力。但考虑到后期的迁移和更新等，实在过于麻烦，个人博客其实使用SSR或SSG之类的框架就行了，比如Nextjs，Nuxtjs，Remix等等。于是我接触到了Astro这个框架，它厉害的是不与任何前端框架进行强行绑定，比如Nextjs是与React强绑定的，
  • Cannot find module 'node:fs' 报错解决 nuxt 前端nuxt.js
    问题描述启动项目报错Cannotfindmodule'node:fs'，百度说是node版本问题，试了各种node版本还是不行（最开始是20.10.0，尝试了降级到14、16都不行）解决方法更新nuxt版本，之前是2.14.6，更新为2.15.8问题解决，启动后报另一个错，增加安装依赖@babel/plugin-proposal-private-property-in-object后问题解决
  • 【nuxt.js】pc端链接转成二维码 可以手机端长按或者扫扫码识别 小峰同学的前端之路
    需求：vue\nuxt.js项目中pc端链接转成二维码可以手机端长按或者扫扫码识别,最终效果：方法一：单纯生成带数据的二维码1）：终端安装@xkeshi/vue-qrcode.js包npminstall--save@xkeshi/vue-qrcode//安装到生产环境importQrcodefrom"@xkeshi/vue-qrcode";//引入exportdefault{data(){retu
  • SSR，云平台，ChatGPT——我的 2023 技术关键词
    前言2023年，因为换工作，启动新项目等原因，我对我的技术栈进行了比较大的更新，主要集中在这三个方向：SSR（ServerSideRendering，服务器端渲染）。之前我开发的项目基本上都是SPA（SinglePageApplication），比如Vue，但之后我会越来越多开始用Nuxt。由于基础设施的发展，以后SSR会更方便更好用。云平台。以前我大概买了3、4台云服务器用来做各种尝试，在上面各
  • Nuxt3+Vue3(Composition API)+TS+Vite+Ant Design Vue 搭建 拾荒李 vue.js前端javascript
    最近官网搭建选择了nuxtjs，由于框架更新了，其中语法也有很多变化，中间遇到了一些问题点做下总结。nuxt3官方文档地址：https://nuxt.com/docs/getting-started/installation安装在安装Nuxt3之前，你需要保证你的node.js大于16.10.0或者最新版本，我是用得最新版本18创建一个nuxt项目npxnuxiinit切换到刚创建的项目根目录cd
  • 【运维】永久关闭selinux不当，导致无法启动 虹梦未来 运维
    现象:卡centosloading进度条按esc键发现,启动报错:FailedtoloadSElinuxpolicy,freezing可能的原因:selinux=disabled写错成disable或者错误的把selinuxtype改了，要改文中红框的部分。解决方案:1.重启2.出现选择画面的时候按e3.方向下键找到linux16这一行，在末尾添加上selinux=0，然后ctrl+x继续启动4.
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo