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

1.创建项目

项目名称是myProject

vue create myProject

2.vetur报错调整

• 由于vue3引入组件后不用在components中声明，vetur插件会报错
• 解决办法：vscode设置 -》 搜索vetur -》 找到下面这个选项，把他关掉。然后重新打开文件，发现没有报错了
  

3.vite2使用eslint校验

！！推荐使用这一篇的eslint配置方案【vite】vite项目从0开始配置eslint
不使用上一篇的话，就按下面的步骤来~

1. 安装eslint
   执行命令npx eslint --init，按照以下选项配置依赖，会顺带下载四个依赖
   
2. 下面开始适配vue3
   打开.eslinttrc.js
   1.删除extends中的"plugin:vue/essential"
   2.删除plugins中的"vue"
   3.在extneds中添加'plugin:vue/vue3-recommended'
   4.安装pnpm i -D prettier eslint-config-prettier和pnpm i eslint-plugin-prettier
   
   5.在extends里面加一句：'plugin:prettier/recommended'
   

4.使用vue-router

1. 安装

npm install vue-router@4

2. 在src下创建目录router/index.ts
   注意引入方式import * as VueRouter from 'vue-router'。。直接import VueRouter from 'vue-router'会报错Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue-router.js?v=8dd0ce81’ does not provide an export named ‘default’
   import * as VueRouter from ‘vue-router’

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

3. 在main.ts中应用router

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

import router from './router'

const app = createApp(App)

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

app.mount('#app')

5.使用vuex

1. 安装

npm install vuex@next --save

2. 在src下创建目录

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

6.使用vant4

1. 安装

npm i vant

2. 安装插件实现按需引入组件的样式

// 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>

7.使用less

1. 安装

npm install  less less-loader -d

8.移动端将px转为rem

1. 安装插件

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

2. 在main.ts中

import 'amfe-flexible'

3. 在根目录下创建postcss.config.js

// 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
    }
  }

9.使用axios

1. 安装

npm install axios -S
npm install qs  -S

2. 在utils目录下创建http.js，根据项目要求配置请求/响应拦截器

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)
      })
  })
}

3. 在src目录下创建api目录，用来放接口请求

// 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'

10.配置请求代理

// 在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', '')
      }
    }
  }