Vue3實戰(zhàn)——項目搭建（二）

一、全家桶

vue3+vite
vue-router
pinia 狀態(tài)管理、pinia-plugin-persist 數(shù)據(jù)存儲
axios 接口請求
postcss-px-to-viewport 移動端適配
vant4 移動端UI庫

二、開始

1、創(chuàng)建項目 vue3_h5

yarn create vite vue3_h5 --template vue

2、風(fēng)格規(guī)范

組件名：單文件組件的文件名—單詞大寫開頭 (PascalCase)、橫線連接 (kebab-case)。
緊密耦合的組件名：子組件應(yīng)該以父組件名作為前綴命名。
Prop名：命名使用 camelCase，在模板中使用 kebab-case。
指令縮寫，用 : 表示 v-bind: ，用 @ 表示 v-on:。
Props順序：依次指令、屬性和事件。
組件選項順序：

export default {
  name: '',
  components: {},
  props: {},
  data() {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};

三、項目配置

1. postcss-px-to-viewport 移動端適配

功能：將px單位轉(zhuǎn)換為視口單位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。
postcss-px-to-viewport：插件文檔。
vite postcss：Vite自身已經(jīng)集成PostCSS。
配置參考：在Vite中配置方法。

// vite.config.js文件
import postcsspxtoviewport from 'postcss-px-to-viewport'
css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要轉(zhuǎn)化的單位
          viewportWidth: 375, // UI設(shè)計稿的寬度
          unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點位數(shù)
          propList: ['*'], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
          viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
          fontViewportUnit: 'vw', // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
          selectorBlackList: ['ignore-'], // 指定不轉(zhuǎn)換為視窗單位的類名，
          minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
          mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
          replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
          // exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配
          exclude: [],
          landscape: false // 是否處理橫屏情況
        })
      ]
    }
  },

2. 配置別名、開發(fā)服務(wù)器配置

// vite.config.js文件
import { resolve } from 'path';
import postcsspxtoviewport from 'postcss-px-to-viewport'
  resolve:{
    alias:{
      '@':resolve('./src')
    }
  },
  server:{
      proxy: {
        [VITE_API_BASE_URL]: {
          target: VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => {
            return path.replace('/api/', '/');
          }
        }
      },
      port:8000, // 服務(wù)器端口
      open: true, // 服務(wù)器啟動時自動在瀏覽器中打開
      cors: true // 允許跨域
    },

3. 安裝UI庫-vant3

（1）安裝UI庫vant3 yarn add vant
（2）按需自動導(dǎo)入UI庫組件：見步驟【4】。
（3）直接在模板中使用使用 Vant 組件
<van-button type="primary" /> Vant 中unplugin-vue-components 會解析模板并自動注冊對應(yīng)的組件。

說明：Vant中個別組件以函數(shù)的形式提供（Toast，Dialog，Notify 和 ImagePreview），使用 unplugin-vue-components 插件來自動引入組件樣式，則無法正確識別。

（4）函數(shù)形式組件，使用時需要在具體頁面引入使用。

  • 引入組件：import { Toast,Dialog } from 'vant';

  • 還需要引入組件的樣式。【手動引入、插件】

    • A. 需要在公共模塊中，手動引入組件的樣式。 
      import 'vant/es/toast/style';// Toast
import 'vant/es/dialog/style';// Dialog
    • B. 插件vite-plugin-style-import配置自動引入樣式：步驟【5】——【不推薦！】

4. unplugin-vue-components 按需自動導(dǎo)入組件

插件文檔：https://github.com/antfu/unplugin-vue-components
功能：導(dǎo)入自定義組件、自動導(dǎo)入UI庫。
原理：插件會生成一個ui庫組件以及指令路徑components.d.ts文件。
自動導(dǎo)入?yún)⒖迹?a target="_blank">https://juejin.cn/post/7012446423367024676#heading-8

安裝：yarn add unplugin-vue-components -D
配置：

// vite.config.js文件
import Components from 'unplugin-vue-components/vite'
import {VantResolver} from 'unplugin-vue-components/resolvers'
  plugins: [
    Components({
      // 指定組件位置，默認(rèn)是src/components
      dirs: ['src/components'],
      // ui庫解析器，也可以自定義
      resolvers: [
        VantResolver(),
      ],
      // 配置文件生成位置
      dts: 'src/components.d.ts'
    })
  ],

5. vite-plugin-style-import 按需自動導(dǎo)入樣式

vite-plugin-style-import:https://github.com/vbenjs/vite-plugin-style-import/blob/main/README.zh_CN.md
功能：按需導(dǎo)入組件庫樣式。
警告：【不推薦！】vant組件樣式前后存在覆蓋問題。

安裝：yarn add vite-plugin-style-import -D
安裝consola：用于 Node.js 和瀏覽器的優(yōu)雅控制臺記錄器。

import {createStyleImportPlugin, VantResolve} from 'vite-plugin-style-import'
// vite.config.js文件
createStyleImportPlugin({
      resolves: [
        VantResolve(),
      ],
      // 自定義規(guī)則
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => {
            return `../es/${name}/style/index`
          }
        }
      ]
    })

6. unplugin-auto-import 自動導(dǎo)入vue3的hooks

功能：支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自動引入。
表現(xiàn)：不需要引入import { ref, computed } from 'vue'
原理：安裝的時候會自動生成auto-imports.d文件(默認(rèn)是在根目錄)。

// vite.config.js文件
import AutoImport from 'unplugin-auto-import/vite';
AutoImport({
      dts: 'src/auto-imports.d.ts',
      imports: [
        'vue',
        'pinia',
        'vue-router',
      ],
    })

7. pinia狀態(tài)管理

  1. 安裝pinia yarn add pinia
    pinia-plugin-persist：持久化存儲插件。參考

  2. 配置

// store/index.js
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPersist)
export default store

// main.js
import store from './store'
app.use(store)

8. vue-router路由

  1. 安裝vue-router yarn add vue-router

  2. 配置

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    redirect: '/home',
    component: () => import('@/views/home/index.vue'),
  },
  {
    name: 'home',
    path: '/home',
    component: () => import('@/views/home/index.vue'),
  },
  {
      name: 'detail',
      path: '/detail',
      component: () => import('@/views/detail/index.vue'),
    },
];

const router = createRouter({
  history: createWebHashHistory('/'),
  routes: routes,
});

export default router;

// main.js
import router from './router/index'
app.use(router)

注意：使用createWebHashHistory模式，在瀏覽器訪問鏈接才能找到正確路徑。

9. axios網(wǎng)絡(luò)請求

  1. 安裝axios npm install axios

  2. 配置

import axios from 'axios';
import { showToast,showLoadingToast,closeToast  } from 'vant';

// 運(yùn)行時獲取環(huán)境變量，使用import.meta.env
const { VITE_API_BASE_URL, VITE_BASE_URL, VITE_NODE_ENV } = import.meta.env
// 創(chuàng)建實例時配置默認(rèn)值
const instance = axios.create({
  baseURL: VITE_NODE_ENV === 'production' ? VITE_BASE_URL : VITE_API_BASE_URL,
  withCredentials: true,
  timeout: 5000,
  headers:{
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

// 添加請求攔截器
instance.interceptors.request.use(
  (config) => {
    if(config.url.indexOf('&__act=export_string')>=0){
      config.headers['Content-Type'] = 'application/json';
    }
    // 不傳遞默認(rèn)開啟loading
    if (!config.hideLoading) {
      showLoadingToast({
        forbidClick: true,
      });
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

// 添加響應(yīng)攔截器
instance.interceptors.response.use(
  (response) => {
    closeToast();
    if(response.data.data == undefined){
      showToast('接口請求失敗，請稍后再試！');
    }
    const res = response.data.data[0];
    if (res.code !== 200) {
      showToast(res.errmsg);
      return Promise.reject(res.errmsg || 'Error');
    } else {
      return Promise.resolve(response);
    }
  },
  (error) => {
    if (error.message?.includes('timeout')) {
      showToast('請求超時!');
    }
    return Promise.reject(error.message);
  },
);

const request = (config)=> {
  return new Promise((resolve, reject) => {
    instance
      .request(config)
      .then((res) => resolve(res.data))
      .catch((err) => reject(err));
  });
};

export default request;

10. unplugin-vue-define-options [網(wǎng)絡(luò)下載問題，未用到]

功能：組件內(nèi)顯示定義 name 屬性，覆蓋推導(dǎo)出的文件名稱。
參考：https://juejin.cn/post/7142797517355221023

  1. 安裝 yarn add unplugin-vue-define-options -D

  2. 配置 vite

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

3.編寫定義

// 默認(rèn)寫法
<script>
  export default {
    name: "MyComponent"
  }
</script>

<script setup lang="ts">
</script>

// 添加插件后
<script setup lang="ts">
defineOptions({
  name: "MyComponent"  
})
</script>

11. sass作為css預(yù)處理

  1. 安裝 yarn add sass -D
    Vite提供了對 .scss 文件的內(nèi)置支持，沒有必要安裝特定的 Vite 插件，但必須安裝預(yù)處理器依賴。

  2. 對 variables、common.scss作全局引入。

// vite.config.ts
css: {
    preprocessorOptions: {
      // 引入公用的樣式
      scss: {
        additionalData: `@import "@/styles/common.scss";@import "@/styles/variable.scss";`,
      }
    }
  }
  1. 通過 <style lang="sass">自動開啟。

12. autoprefixer 瀏覽器前綴處理插件

  1. 安裝
    yarn add autoprefixer

  2. 配置

// vite.config.ts
import autoprefixer from 'autoprefixer'
css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist:[
            "Android > 4.1",
            "iOS >= 7.1",
            'Chrome > 31',
            "ff >= 31",
            'ie>= 8',
          ],
          grid:true
        })
      ],
    }
  },

13. 打包文件夾分離

vite默認(rèn)打包后，js 和 css 是全部混在一起的，將 js 和 css 文件夾分離。

// vite.config.ts
build: {
      brotliSize: false,
      // 消除打包大小超過500kb警告
      chunkSizeWarningLimit: 2000,
      // 在生產(chǎn)環(huán)境移除console.log
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      assetsDir: 'static/assets',
      // 靜態(tài)資源打包到dist下的不同目錄
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    }

注意：組件xx.vue需要使用不同name命名，不可都用xx/index.vue，否則打包固定文件名，會缺少樣式。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容