nuxt入门2

罗罗666

于 2023-02-16 10:34:32 发布

阅读量156

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/u014491457/article/details/129047692

版权

路由嵌套：
nuxt.config.js设置components为true，开启组件自动导入，不需要使用import和components，只需要在template中写入组件名即可。

——全局路由动画
全局默认动画在page进行，在assets/css/下创建xx.css文件；
然后在nuxt.config.js中设置一个全局css即可，css:[‘assets/css/main.css’]；
配合nuxt-link使用动画效果才有效。
——单独页面动画效果
更改page默认样式，组件内引入transition：

.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;
}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}

例如，about.vue页面

export default {
  transition:'test'
}

nuxt默认模版和默认布局
——默认模版
遇到公用元素，一般可以写为组件，或者修改默认模版。
在根目录下建立app.html文件，

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>公用内容</p>
    {{ APP }}
</body>
</html>

这里的HEAD读取的是nuxt.config.js里的信息，APP是pages文件夹下的页面，需要大写，否则会报错。

——默认布局
在根目录下layouts/default.vue下设置。

nuxt插件
——elementUI
下载 npm i element-ui -S
plugins文件夹下面，创建ElementUI.js

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

nuxt.config.js中添加

css: [
  'element-ui/lib/theme-chalk/index.css'
],
plugins: [
  {src: '~/plugins/ElementUI', ssr: true }
],
build: {
  vendor: ['element-ui']
}

按需引入：
npm install element-ui --save
必须安装babel-plugin-component
npm install babel-plugin-component --save-dev
plugins文件夹，创建ElementUI.js:

import Vue from 'vue'

import { Button } from 'element-ui'    //引入Button按钮

export default ()=>{
    Vue.use(Button)
}

nuxt.config.js中设置：

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
    {
        src:'~/plugins/ElementUI',
        ssr:false    //关闭ssr
    }
]

nuxt.config.js ，配置babel：

build: {
      babel:{        //配置按需引入规则
          "plugins":[
              [
                  "component",
                  {
                      "libraryName":"element-ui",
                      "styleLibraryName":"theme-chalk"
                  }
              ]
          ]
      },
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
        })
      }
    }
 }

——axios

npm i --save axios
使用：

import axios from 'axios'

asyncData(context, callback) {
  axios.get('http://localhost:3000/xxxx')
    .then(res => {
      console.log(res);
      callback(null, {list: res.data})
    })
}

为了防止重复打包，nuxt.config.js中配置：

module.exports = {
  build: {
    vendor: ['axios']
  }
}

——vuex
nuxt 内置引用了 vuex 模块，所以不需要额外安装。
store/index.js

export const state = () => ({
    articleTitle: [],
    labelList: []
})

export const mutations = {
    // 设置热门文章标题
    updateArticleTitle(state, action) {
        state.articleTitle = action
    },
    // 设置标签列表数据
    updateLabel(state, action){
        state.labelList = action
    }
}

export const actions = {
    // 获取热门文章标题
    fetchArticleTitle({ commit }) {
        return this.$axios
            .$get('http://localhost:3000/article/title')
            .then(response => {
                commit('updateArticleTitle', response.data)
            })
    },
    // 获取标签
    fetchLabel({ commit }) {
        return this.$axios
            .$get('http://localhost:3000/label/list')
            .then(response => {
                commit('updateLabel', response.data)
            })
    },

}

store下的js文件会被转换成为状态树指定命名的子模块：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

（未完…）

罗罗666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
nuxt入门2

nuxt.config.js设置components为true，开启组件自动导入，不需要使用import和components，只需要在template中写入组件名即可。然后在nuxt.config.js中设置一个全局css即可，css:[‘assets/css/main.css’]；这里的HEAD读取的是nuxt.config.js里的信息，APP是pages文件夹下的页面，需要大写，否则会报错。全局默认动画在page进行，在assets/css/下创建xx.css文件；例如，about.vue页面。
复制链接

扫一扫