vite+v3—移动端项目搭建

项目技术栈

• 组件库 vant

yarn add vant

• 自动按需引入vant

yarn add unplugin-vue-components -D

• postcss-px-to-viewport （将 px 单位转化为 vw/vh 单位）

yarn add -D postcss-px-to-viewport

• axios

yarn add axios

一.按需引入vant组件

1. 安装unplugin-vue-components （自动按需引入vant插件）
2. 在 vite.config.ts 文件中配置插件：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入vant
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
 plugins: [
   vue(),
   // 配置按需导入
   Components({
     resolvers: [VantResolver()]
   })
 ],
 resolve: {
   alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url))
   }
 }
})

二、移动端适配

1. 安装 postcss-px-to-viewport
   • 采用将 px 单位转化为 vw/vh 单位的原理实现适配。
2. 在 vite.config.ts 文件中配置移动端适配

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import postcssPxToViewport from 'postcss-px-to-viewport'
export default defineConfig({
 plugins: [
   vue(),
   Components({
     resolvers: [VantResolver()]
   })
 ],
 resolve: {
   alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url))
   }
 },
 // 移动端适配
 css: {
   postcss: {
     plugins: [
       postcssPxToViewport({
         viewportWidth: 375
       })
       // 添加其他需要的 PostCSS 插件
       // ...
     ]
   }
 }
})

三、配置eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript/recommended'
  ],
  env: {
    'vue/setup-compiler-macros': true
  },
  rules: {
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['index']
      }
    ],
    'vue/no-setup-props-destructure': ['off'],
    // 支持对 defineProps 解构
    'vue/no-mutating-props': ['off']
  }
}

四、token

1.安装并引入pinia-plugin-persistedstate（token持久化插件）

• mainman.ts

import { createApp } from 'vue'
import PiniaPersisted from 'pinia-plugin-persistedstate'
const app = createApp(App)
app.use(createPinia().use(PiniaPersisted))

2.token处理、并添加持久化标记

• src/stores/token.ts

  import { defineStore } from 'pinia'
  import { ref } from 'vue'
  const useToken = defineStore(
    'mianjin_token',
    () => {
      const token = ref<string | null>(null)
      const updataToken = (value: string) => (token.value = value)
      const delToken = () => (token.value = null)
      return { token, updataToken, delToken }
    },
    {
      persist: true // 持久化
    }
  )
  export default useToken

五、路由守卫

• src/permission.ts

import router from '@/router/index.ts'
import useToken from '@/stores/token.js'
// 进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 前置守卫
router.beforeEach((to, from, next) => {
  nprogress.start()
  const { token } = useToken()
  if (to.path !== '/register' && to.path !== '/login' && !token) {
    next('/login')
  } else {
    next()
  }
})

// 后置导航守卫
router.afterEach(() => nprogress.done()) // 关闭进度条

• 判断是否有token、是否在白名单、然后判断是否放行 。
• nprogress进度条插件、在前置守卫开启、后置守卫关闭。