Nuxt+Vue_nuxt vue-CSDN博客

本文链接：https://blog.csdn.net/weixin_51220466/article/details/131417897

Nuxt.js是一个基于Vue.js的框架，用于快速构建应用。在Nuxt中，插件需在nuxt.config.js中配置，如Element-UI。此外，由于服务器端不存在window对象，引用含window的库时需手动创建。文章介绍了Nuxt的配置细节，包括路由、CSS引入、组件注册等。

摘要由CSDN通过智能技术生成

Nuxt.js是一个基于Vue.js的开源框架，它帮助我们快速构建Vue.js应用程序，并提供许多有用的功能。还可以用于构建静态文件服务器，这意味着我们可以使用Nuxt.js构建一个简单的静态网站。但在使用的过程中也遇到了一些问题。

插件引入

在Vue.js中，我们可以使用Vue.use()来安装插件。但是在Nuxt.js中，我们需要在nuxt.config.js文件中使用plugins属性来安装插件。这是因为Nuxt.js需要在服务器端和客户端上都安装插件。

以element为例：需在/plugins/***/中添加element.js文件并在其中引入

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

把文件引进后需再在nuxt的配置文件nuxt.config.js中引入

import router from './router'

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '***',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/static/css/common.scss',
    '@/static/css/swiper.min.css',
    '@/iconfont/iconfont.css',
    'element-ui/lib/theme-chalk/index.css',
    'animate.css/animate.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui',
    { src: '@/plugins/wow.js', ssr: false }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      '@/static/css/tool.scss'
    ]
  },

  router,

  build: {
    transpile: [/^element-ui/],
  }
}

在此文件中可配置模块，css文件引入，组件自动注册，引入的组件，网站图标、标题 and so on

在此特别要注意的一点是 nuxt中没有使用window的方法会报错，需要在外部js引用完后再进行引入文件使用以wow.js为例

import { WOW } from 'wowjs'

window.WOW = WOW;  //因为服务端没有window，而wowjs里面是有window的，所以这里必须手动创建一个


new WOW({ //可以添加自定义内容
  live: false,
  offset: 0
}).init()

以上就是我使用nuxt途中遇到的问题，欢迎大家补充^ _ ^ ~

原创码字不易，如果你觉得对你有帮助的好劳烦你动动你的小手点个赞，当然关注收藏三连就更好了！！！^_^！