【Vue】Nuxt最佳实践之常用库封装(一)

前言

有关同构渲染SSR相关的基础知识，不再赘述，小伙伴们可自行补充，传送门: Vue.js 服务器端渲染指南

本文主要介绍了基于Vue官方脚手架: create-nuxt-app，如何实现基础的项目搭建过程，相关代码已开源至git，戳这里 BugBoomNuxt 抱走，看都看了，点个star呗～

概览

全文大概3000字，阅读需要15分钟，配合专栏文章食用更佳哦：）

1. 服务端框架 - Koa
2. UI框架 - Vant
3. HTTP请求 - nuxt@axios
4. 常用工具类
5. 部署管理
6. 团队管理

服务器端框架

Express VS Koa，别问我为啥选这两货，我手指前端大海的方向，哪条腿大抱哪家就完事了，萌新可怜弱小又无助，对比分析可参考某乎，Express和koa各有啥优缺点?，Koa官方说明-来自全世界最大的同性交友平台

博主选择Koa，因为No Callback! No Callback! No Callback! 重要的事情说三遍！，处理异步的async await用起来太爽啦，比generator yield好用多了，PS：用了koa做了几个项目之后，才感觉出Nodejs的神奇

咳咳，回归正题，选择这两货在创建项目时即可，app文件会生成在server/index.js下

UI框架

本项目以H5为主，会接入微信SDK，所以对于UI框架的要求是轻巧，耐抗，加可扩展，之前有详细对比过iview，vux，vant

/	生态	颜值	可扩展
iview	2019年10发布4.0，团队	22.9k	主题、国际化、按需、后台管理
vux	最近更新去年，个人	16.6K	we-ui同胞，内置wxsdk、h5&&wx
vant	持续更新，有赞前端团队	12.2K	主题、国际化、按需、h5

在这里安利一波 tailwindcss，简单点就是高度定制化的Bootstrap，让开发者拥有更多的控制权，可以少写80%的css，Nuxt官网开源代码就是采用的Tailwind CSS

Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。

博主选择vant + Tailwind CSS，因为之前做过小程序，用过zan-ui，有知道的小伙伴可以举个爪 -。-，

前方高能预警，干货到了～～～～

npm i less less-loader -D

安装less扩展，建议安装2.x, 3.x上的less有较严重的兼容性问题，配合nuxt使用

npm i @nuxtjs/style-resources vant -S

注入到nuxt.config.js，修改主题色可参考官方说明，坑位预留: 按需导入组件

modules: [
  '@nuxtjs/style-resources'
],
styleResources: {
   
  less: '@/assets/**/*.less'
},
build: {
   
  loaders: {
   
    less: {
   
        javascriptEnabled: true  // 兼容less 3.x写法
        , modifyVars: {
             // 定制 vant 主题文件
          hack: `true; @import "${
     path.join(
            __dirname,
            './assets/css/theme.less'
          )}";`
        }
    }
  }
}

配置vant-ui插件，并注入到nuxt全局，目录 plugins/vant-ui.js

import Vue from 'vue'
import {
    
  Button, Swipe, SwipeItem, Image, Lazyload 
} from 'vant';

const Vant = {
   
  Button, Swipe, SwipeItem, Image, Lazyload
}

import 'vant/lib/index.less' // 替代方案 babel-plugin-import

Object.entries(Vant).forEach(item => {
   
  const [key, value] = item
  Vue.use(value)
})

// plugins: [ '@/plugins/vant-ui' ] write code for nuxt.config.js
// 思考？添加ssr属性 { src: String, ssr: Boolean }

Tip: 配置tailwind可参考源代码和官方说明

HTTP请求

官方推荐axios，咳咳@nuxtjs/axios，但是留有一点疑问，$axios对象无法对外抛出，既无法在普通模块js中引用该对象0.0，全家桶直接撸起～

npm i @nuxtjs/axios js