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途中遇到的问题,欢迎大家补充^ _ ^ ~
原创码字不易,如果你觉得对你有帮助的好劳烦你动动你的小手点个赞,当然关注收藏三连就更好了!!!^_^!