前言
今天抽空过了遍nuxt文档，写了个实践demo，关于nuxt我已经断断续续看了好几遍了，自我感觉也算是入门了吧，从开发到上线心里都有底。后期打算在项目用起来的是nuxt框架，一些函数工具库，比如ramda，lodash等等，后台服务估计会使用### fastify 这个库，目测非常方便，尝试尝试。
基础只是还是以官方文档为主，尝试过程中如果有什么问题可以留言，看到会回复，文章如有错误，欢迎指正。
预处理器的使用
安装需要的loader后指定lang就可以直接使用。
npm i less less-loader --save--dev／／全局css css: [ { src: 'static/less/base.sass', lang: 'less' } ], ／／页面中使用 <style lang="less" scoped></style>页面loading
//禁用module.exports = { loading: false}／／颜色条module.exports = {loading: { color: '#3B8070' }}／／使用组件添加一个loading组件 (官方示例如下，详情可看官方文档)引用该组件module.exports = { loading: '~components/loading.vue'}/// components/loading.vue <template lang="html"> <div class="loading-page" v-if="loading"> <p>Loading...</p> </div></template><script>export default { data: () => ({ loading: false }), methods: { start () { this.loading = true }, finish () { this.loading = false } }}</script><style scoped>.loading-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); text-align: center; padding-top: 200px; font-size: 30px; font-family: sans-serif;}</style> 按照官方引用组件的方法，我测试报了个错，把~/ 改成 ./ 解决。估计是nuxt解析vue文件的问题。
使用插件、第三方模块
//通过script标签 head: { script: [ { src: 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js' } ] }, //plugins配置 ， ssr：false 设置只在客户端使用 plugins: [ { src: '~plugins/flexible.js', ssr: false } ],／／在页面中使用axios，配置vendor使其只打包一次／／页面<template> <h1>{{ title }}</h1></template><script>import axios from 'axios'export default { async asyncData ({ params }) { let { data } = await axios.get(`https://my-api/posts/${params.id}`) return { title: data.title } }}</script>／／配置文件module.exports = { build: { vendor: ['axios'] }}使用第三方组件库
在nuxt里使用第三方UI组件库也非常简单。以iview为例（我个人非常中意的组件库）
///在plugins下新建 iview.jsimport Vue from 'vue'import iView from 'iview';Vue.use(iView);////配置文件引入css和pluginmodule.exports = { css: [ { src: 'iview/dist/styles/iview.css'} ], plugins: [ { src: '~plugins/iview.js', ssr: false } ], }路由
//基础路由示例， 详情请看官方文档pages/--| user/-----| index.vue-----| one.vue--| index.vuerouter: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ]}nuxt为我们省去了定义路由的过程，页面结构自动生成路由，不得不说，这对开发效率是有比较大的提升。官方还提供了路由切换动画，中间件等配置，我们可以在切换路由时良好的控制页面。
中间件
开发后台管理页面的时候，我们经常有autu认证需求，如果没有登录，或者权限问题，都有一个脚本去控制跳转，中间件就派上用场了。
// middleware/auth.js export default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') }}//页面单独使用export default { middleware: 'auth' }///全局使用module.exports = { router: { middleware: 'auth' } }上面我们定义了一个auth中间件，如果用户未登录，则跳转登录页。
视图和错误页
一般开发SPA页面，我们一般是组件＋页面混合开发，，nuxt则是固定布局layouts，路由必须采用一个layouts，默认default，页面内部我们可以像个vue开发那样引入多个components。
nuxt可以定义个错误页，在layouts下定义个error.vue文件。具体代码可以看官方文档
asyncData
nuxt扩展的异步数据方法，对于页面数据，我们一般有页面data定义的形式和vuex统一管理的形式，可以根据自己的需求选择。
data定义这里就不赘述了，这里说一下vuex统一管理数据的做法。
///page页面<template> <div class="container"> <p class="title">数据展示!</p> <Table :columns="columns1" :data="data1"></Table> </div></template><script> import { mapState } from 'vuex' import axios from 'axios' export default { middleware: 'auth', //定义页面中间件 head () { return { title: '其他页面' } }, data () { return {} }, async fetch ({ store, params }) { let { data } = await axios.get('http://106.14.205.222/article/list?page=1&limit=10&isActive=1') console.log( data ) store.commit('SET_LIST', data.list) }, computed: { ...mapState([ // 映射 this.xxx 为 store.state.xxx 'columns1', 'data1' ]) },
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。