nuxtjs笔记

安装

yarn create nuxt-app <项目名>

端口

// package.json

"config": {
    "nuxt": {
      "host": "127.0.0.1",
      "port": "3001"
    }
}

跨域 nuxt.config.js

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
],
axios: {
    proxy: true
},
proxy: {
    '/api': {
        // todo
    }
}

预处理器sass

安装  node-sass sass-loader

就可以使用

默认模板

export default {
  //这里声明我用search模板,那就不是用default模板了
  layout: 'search'
}

路径引用 绝对路径

~assets
~pages

隐藏路由

文件名前加_

|-- pages
    |-- _about.vue
    |-- index.vue
    
    ===>
    
routes: [
  {
    path: '/',
    component: '~pages/index.vue'
  }
]

Vue.use 的插件

// 需要在 plugins 中新建一个 js 的文件
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)


// 然后需要在 nuxt.config.js 的 plugins 中增加其配置 :
module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

部署 ? pm2 ?

"scripts": {
    "build": "nuxt build && nuxt start",
}

pm2 start ./node_modules/nuxt/bin/nuxt -- start

less全局变量的配置

使用less先安装less less-loader

nuxt.config.js中配置

css: [
    'element-ui/lib/theme-chalk/index.css',
    '@assets/styles/global.less'
],
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources'
],
styleResources:{
    less:[
      './assets/styles/variable.less'
    ]
}

styleResources 配置的资源路径不能使用 ~ 和 @,要使用绝对或者相对路径

普通less

安装 less 和 less-loader 

安装富文本编辑器

ckeditor4-vue

plugins下新建 ckeditor4-vue.js

import Vue from "vue";
import CKEditor from "ckeditor4-vue";

Vue.use(CKEditor);

nuxt.config.js下引用

plugins: [
    "@/plugins/element-ui",
    { src: "@/plugins/ckeditor4-vue", ssr: false } // 富文本最好使用nossr ，基本都不支持window
]

最后组件中直接使用

vue-quill-editor

https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-quill-editor/nuxt

高亮

图片上传

https://www.jianshu.com/p/9e4e4d955d0f

handleSuccess (res) {
    // 获取富文本组件实例
    let quill = this.$refs.QuillEditor.quill
    // 如果上传成功
    if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res)
        // 调整光标到最后
        quill.setSelection(length + 1)
    } else {
        // 提示信息，需引入Message
        Message.error('图片插入失败')
    }
}

自定义错误/404页面

layouts/error.vue

return error({ message: "文章不存在", statusCode: 404 });

全局配置 组件默认的激活类名。

https://zh.nuxtjs.org/api/configuration-router/#linkactiveclass

nuxt.config.js

module.exports = {
  router: {
    linkActiveClass: 'active-link'
  }
}

为应用的每个页面设置默认的中间件。

nuxt.config.js

module.exports = {
  router: {
    // 在每页渲染前运行 middleware/user-agent.js 中间件的逻辑
    middleware: 'user-agent'
  }
}