快捷導(dǎo)航

vue3使用vite搭建的項(xiàng)目需要安裝的插件/配置方式

更新時(shí)間：2024年03月09日 09:23:08 作者：sqwu

這篇文章主要介紹了vue3使用vite搭建的項(xiàng)目需要安裝的插件/配置方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.創(chuàng)建項(xiàng)目

項(xiàng)目名稱是myProject

vue create myProject

2.vetur報(bào)錯(cuò)調(diào)整

由于vue3引入組件后不用在components中聲明，vetur插件會(huì)報(bào)錯(cuò)

解決辦法：vscode設(shè)置 -》搜索vetur -》找到下面這個(gè)選項(xiàng)，把他關(guān)掉。然后重新打開文件，發(fā)現(xiàn)沒有報(bào)錯(cuò)了

3.vite2使用eslint校驗(yàn)

推薦使用這一篇的eslint配置方案??【vite】vite項(xiàng)目從0開始配置eslint

不使用上一篇的話，就按下面的步驟來~

1.安裝eslint

執(zhí)行命令npx eslint --init，按照以下選項(xiàng)配置依賴，會(huì)順帶下載四個(gè)依賴

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下創(chuàng)建目錄router/index.ts

注意引入方式import * as VueRouter from 'vue-router'。。

直接import VueRouter from 'vue-router'會(huì)報(bào)錯(cuò)

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')
  }
]
// 創(chuàng)建路由實(shí)例
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), // hash模式
  routes
})
export default router

3.在main.ts中應(yīng)用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下創(chuàng)建目錄

store
    ├── index.js          # 我們組裝模塊并導(dǎo)出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模塊
        └── products.js   # 產(chǎn)品模塊

6.使用vant4

1.安裝

npm i vant

2.安裝插件實(shí)現(xiàn)按需引入組件的樣式

// 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.移動(dòng)端將px轉(zhuǎn)為rem

1.安裝插件

// 是postcss的插件，用于將像素單元生成rem單位。
npm install postcss-pxtorem -D
// 配置可伸縮布局方案，主要是將1rem設(shè)為viewWidth/10
npm install amfe-flexible -S

2.在main.ts中

import 'amfe-flexible'

3.在根目錄下創(chuàng)建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, // 換算的基數(shù)(設(shè)計(jì)圖750的根字體為75)
      propList: ['*'], // *代表將項(xiàng)目中的全部進(jìn)行轉(zhuǎn)換，單個(gè)轉(zhuǎn)換如width、height等
      unitPrecision: 5
    }
  }

9.使用axios

1.安裝

npm install axios -S
npm install qs  -S

2.在utils目錄下創(chuàng)建http.js，根據(jù)項(xiàng)目要求配置請求/響應(yīng)攔截器

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

// 設(shè)置請求頭
Axios.defaults.headers.post['Content-Type'] = 'application/json'
// 設(shè)置超時(shí)
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目錄下創(chuàng)建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, // 自動(dòng)打開
    base: './',
    proxy: {
      '/app/api': {
        target: 'https://dev.ylzpay.com/api/follow-up/app/api',
        changeOrigin: true, // 打開代理
        rewrite: path => path.replace('/app/api', '')
      }
    }
  }