nuxt使用Ts小结

开始

这一段时间在公司主导新搭建了一个 nuxt 项目。为了紧跟时代潮流，所以想使用 vue3 的 component-api 那一套。
结果调研发现很尴尬，目前的 nuxt.js 还没有升级到 vue3，但是若要使用可以引入 component-api 的 npm 仓库，强行使用。这真是鸡肋到极，所以放弃使用 component-api。

但是为了创新整理活出来，决定使用 Ts 进行开发。
毕竟是第一次使用 nuxt.js，所以启动起来还是比较举步维艰的。脚手架一把锁很简单，但是想优化好，减少项目体积(上优化) 就会麻烦一些。

搭建

nuxt 项目的关键就是nuxt.config.ts，这里必须配置好才可以

那就开始阅读官方文档，学习总是痛苦并快乐的【⊙⊥⊙】

全在这里了 哈哈 点击查看详细内容

配置如下：

      
    const { resolve } = require('path')
    const chalk = require('chalk')
    const plugins = [
      { src: '@/plugins/yxt-comp', ssr: true, mode: 'client' },
      { src: '@/plugins/comp', ssr: false, mode: 'client' },
      { src: '~/plugins/vue-persistedstate', ssr: false },
      { src: '~/plugins/vueLazyLoad', ssr: false },
      { src: '@/plugins/svg-icon', ssr: false },
    ]

if (process.env.YXT_ENV !== 'mock') {
  // 路由守卫在mock环境下不需要生效
  // plugins.push({ src: '@/plugins/router', ssr: false, mode: 'client' })
}

const Domain = {
  mock: {},
}

Domain.mock = {
  current: 'local',
  name: 'mock',
  // baseURL: 'https://yapi.yunxuetang.com.cn/mock/307/v2',
  domainUrl: 'http://m-kc-feat.yxt.com',
  // baseURL: 'https://api-mallmarketing-phx-feat.yunxuetang.com.cn/v2',
  baseURL: 'https://api-mallmarketing-phx.yunxuetang.com.cn/v2',
  // baseURL: 'http://192.168.52.118:8083',
  mallUrl: 'https://api-mall-phx.yunxuetang.com.cn/v2/',
}

export default {
  // server: {
  //   port: 3007,
  //   host: '0.0.0.0',
  // }, // host 和 port 运维需要动态修改 所以写在了 package.json内
  env: domain,
  head: {
    title: 'demo',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content:
          'width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover,maximum-scale=1.0, user-scalable=0',
        // 增加viewport标签
      },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
    ],
    script: [
      { src: '/rem/flexible.js', type: 'text/javascript', charset: 'utf-8' },
    ],
  },
  css: [
    '~/assets/css/public.scss',
    'yxt-h5/lib/index.css',
  ],
  plugins,
  components: true,
  buildModules: ['@nuxt/typescript-build'],
  modules: ['@nuxtjs/axios'],
  axios: {},
  build: {
    /**
    * analyze 使用webpack-bundle-analyzer来可视化包以及如何优化
    * 使用 yarn nuxt build -a
    * */
    extractCSS: { allChunks: true },
    loaders: {
      imgUrl: { limit: 10000 },
      fontUrl: { limit: 10000 },
    },
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*'],
        },
      },
      preset: {
        autoprefixer: true,
      },
    },
    extend(config: any) {
      config.module.rules.push({
        test: /\.scss$/i,
        loader: 'sass-resources-loader',
        options: {
          resources: './assets/css/utils.scss',
        },
      })

      const svgRule = config.module.rules.find((rule: any) =>
        rule.test.test('.svg')
      )
      svgRule.exclude = [resolve(__dirname, 'assets/icons/svg')]

      // 添加loader规则
      config.module.rules.push({
        test: /\.svg$/, // 匹配.svg
        include: [resolve(__dirname, 'assets/icons/svg')], // 将存放svg的目录加入到loader处理目录
        use: [
          { loader: 'svg-sprite-loader', options: { symbolId: 'icon-[name]' } },
        ],
      })
    },
    /**
    * todo 按需打包css
    * */
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'yxt-h5',
            style: (name: string) => {
              return `${name}/style/index.js`
            },
          },
          'yxt-h5',
        ],
      ],
    },
  },
  performance: {
    prefetch: false,
  },
  render: {
    resourceHints: false, // 添加prefetch和preload，以加快初始化页面加载时间。如果有许多页面和路由，可禁用此项
  },
}

  

Vuex配置

喜闻乐见开始store配置环节，我们这里因为使用的是TS，配置也是和传统的不一样。

我这里上了 vuex-class，说实话 vuex-class 是真的好用，模块划分、语法兼容真是舒服呀。

vuex-class 的详细使用可以访问https://www.cnblogs.com/zxuedong/p/12800312.html

然后就是持久化存储了，这里也用上了 vue-persistedstate，考虑到不能太持久 ⊙﹏⊙？ 所以我放到了sessionStorage存他们

mock.js 使用

前期没事确定是否使用YApi，所以我正在项目之初引用了mock.js 这里语法也挺好玩的，但是编辑还是有些麻烦

点击查看详细内容

配置如下：

     
     
      wiki:  https://github.com/nuysoft/Mock/wiki
      Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
      Type    Method
      Basic    boolean, natural, integer, float, character, string, range, date, time, datetime, now
      Image    image, dataImage
      Color    color
      Text    paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
      Name    first, last, name, cfirst, clast, cname
      Web    url, domain, email, ip, tld
      Address    area, region
      Helper    capitalize, upper, lower, pick, shuffle
      Miscellaneous    guid, id

  import Mock from 'mockjs'
  import { demo } from '@/api/mock'
  import { category } from '@/api/mock/category'

  export default function () {
    console.log('process.env.current', process.env.current)
    for (const key in demo) {
      Mock.mock(key, {
        code: 200,
        message: '成功',
        data: demo[key],
      })
    }
    Mock.mock('/product/category', {
      code: 200,
      message: '成功',
      data: category,
    })
  }

</code>