安装

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

就可以使用

<style lang="sass">
.red
  color: red
</style>

默认模板

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
]

最后组件中直接使用

<ckeditor v-model="defaultValue"></ckeditor>

vue-quill-editor

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

高亮

<template>
  <div class="example">
    <quill-editor
      class="editor"
      ref="myTextEditor"
      :value="content"
      :options="editorOption"
      @change="onEditorChange"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
    <div class="output code">
      <code class="hljs" v-html="contentCode"></code>
    </div>
    <div class="output ql-snow">
      <div class="ql-editor" v-html="content"></div>
    </div>
  </div>
</template>

<script>
  import dedent from 'dedent'
  import hljs from 'highlight.js'
  import debounce from 'lodash/debounce'
  import { quillEditor } from 'vue-quill-editor'
  // highlight.js style
  import 'highlight.js/styles/tomorrow.css'
  // import theme style
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  export default {
    name: 'quill-example-snow',
    title: 'Theme: snow',
    components: {
      quillEditor
    },
    data() {
      return {
        editorOption: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'font': [] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image', 'video']
            ],
            syntax: {
              highlight: text => hljs.highlightAuto(text).value
            }
          }
        },
        content: dedent`
          <h1 class="ql-align-center"><span class="ql-font-serif" style="background-color: rgb(240, 102, 102); color: rgb(255, 255, 255);"> I am snow example! </span></h1><p><br></p><p><span class="ql-font-serif">W Can a man still be brave if he's afraid? That is the only time a man can be brave. </span></p><p><br></p><p><strong class="ql-font-serif ql-size-large">Courage and folly is </strong><strong class="ql-font-serif ql-size-large" style="color: rgb(230, 0, 0);">always</strong><strong class="ql-font-serif ql-size-large"> just a fine line.</strong></p><p><br></p><p><u class="ql-font-serif">There is only one God, and his name is Death. And there is only one thing we say to Death: "Not today."</u></p><p><br></p><p><em class="ql-font-serif">Fear cuts deeper than swords.</em></p><p><br></p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">const</span> a = <span class="hljs-number">10</span>;
          <span class="hljs-keyword">const</span> editorOption = { <span class="hljs-attr">highlight</span>: <span class="hljs-function"><span class="hljs-params">text</span> =&gt;</span> hljs.highlightAuto(text).value };</pre><p><br></p><p><span class="ql-font-serif">Every flight begins with a fall.</span></p><p><br></p><p><a href="https://surmon.me/" rel="noopener noreferrer" target="_blank" class="ql-font-serif ql-size-small" style="color: rgb(230, 0, 0);"><u>A ruler who hides behind paid executioners soon forgets what death is. </u></a></p><p><br></p><iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" height="238" width="560"></iframe><p><br></p><p><span class="ql-font-serif">Hear my words, and bear witness to my vow. Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the fire that burns against the cold, the light that brings the dawn, the horn that wakes the sleepers, the shield that guards the realms of men. I pledge my life and honor to the Night’s Watch, for this night and all the nights to come.</span></p><p><br></p><p><span class="ql-font-serif">We are born to suffer, to suffer can make us strong.</span></p><p><br></p><p><span class="ql-font-serif">The things we love destroy us every time.</span></p>
        `,
      }
    },
    methods: {
      onEditorChange: debounce(function(value) {
        this.content = value.html
      }, 466),
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      }
    },
    computed: {
      editor() {
        return this.$refs.myTextEditor.quill
      },
      contentCode() {
        return hljs.highlightAuto(this.content).value
      }
    },
    mounted() {
      console.log('this is Quill instance:', this.editor)
    }
  }
</script>

<style lang="scss" scoped>
  .example {
    display: flex;
    flex-direction: column;
    .editor {
      height: 40rem;
      overflow: hidden;
    }
    .output {
      width: 100%;
      height: 20rem;
      margin: 0;
      border: 1px solid #ccc;
      overflow-y: auto;
      resize: vertical;
      &.code {
        padding: 1rem;
        height: 16rem;
      }
      &.ql-snow {
        border-top: none;
        height: 24rem;
      }
    }
  }
</style>

图片上传

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

<Upload
    :show-upload-list="false"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png','gif']"
    :max-size="2048"
    multiple
    action="/file/upload"
    >
    <Button icon="ios-cloud-upload-outline" ></Button>
</Upload>

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 });

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ["error"],
  layout: "default" // you can set a custom layout for the error page   您可以为错误页设置自定义布局
};
</script>

全局配置 <nuxt-link> 组件默认的激活类名。

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'
  }
}