vue3使用vite搭建的项目需要安装的插件/配置方式

vue create myProject

import * as VueRouter from 'vue-router'
const routes = [
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About/index.vue')
  }
]
// 创建路由实例
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), // hash模式
  routes
})
export default router

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

const app = createApp(App)

// 使用路由
app.use(router)

app.mount('#app')

npm install vuex@next --save

store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

npm i vant

// 1.安装插件依赖
npm i vite-plugin-style-import@1.4.1 -D

// 2.在vite.config.ts使用插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()]
    })
  ]
})

// 3.在页面中使用组件
<template>
    <van-button>登录</van-button>
</template>
<script lang="ts" setup>
import { Button as VanButton } from 'vant'
</script>

npm install  less less-loader -d

// 是postcss的插件，用于将像素单元生成rem单位。
npm install postcss-pxtorem -D
// 配置可伸缩布局方案，主要是将1rem设为viewWidth/10
npm install amfe-flexible -S

import 'amfe-flexible'

// eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8',
        'last 10 versions'
      ],
      grid: true
    },
    // 把px单位换算成rem单位
    'postcss-pxtorem': {
      rootValue: 75, // 换算的基数(设计图750的根字体为75)
      propList: ['*'], // *代表将项目中的全部进行转换，单个转换如width、height等
      unitPrecision: 5
    }
  }

npm install axios -S
npm install qs  -S

import Axios, { AxiosRequestConfig } from 'axios'
import { Toast } from 'vant'

// 设置请求头
Axios.defaults.headers.post['Content-Type'] = 'application/json'
// 设置超时
Axios.defaults.timeout = 6 * 1000

export default function $http({ url, method, params }: AxiosRequestConfig) {
  return new Promise((resolve, reject) => {
    const _axiosConfig = {
      url,
      method,
      params
    }
    Axios(_axiosConfig)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

// api/common.ts
import $http from '../utils/http'
const url = 'https://dev.ylzpay.com/api/follow-up/app/api'
export function getDictInfo(params: unknown) {
  return $http({
    url,
    params
  })
}

// api/index.ts
export * from './common'

// 在vite.config.ts
server: {
    port: 8077,
    open: true, // 自动打开
    base: './',
    proxy: {
      '/app/api': {
        target: 'https://dev.ylzpay.com/api/follow-up/app/api',
        changeOrigin: true, // 打开代理
        rewrite: path => path.replace('/app/api', '')
      }
    }
  }