微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢,學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。
不久前,我意識到我正在用一些重複使用的後臺基礎模板,浪費了我一些摸魚時間,我突然想到--為什麼不把這些可重複使用的部分重新利用起來,把它們簡單地堆在一個模板裡呢??
技術棧
這個後臺模板中,用到了如下的框架或庫:
前提
開始之前,首先要安裝 Node.js,這個自行百度解決。
快速入門 - Vue, Router & Store
我們先從初始化模板開始:
npm init vue@latest
接著輸入專案名稱 vue3-boilerplate
,然後在功能提示中選擇安裝 Pinia
和 Vue Router
:
✔ Project name: vue3-boilerplate
...
✔ Add Vue Router for Single Page Application development? Yes
✔ Add Pinia for state management? Yes
根據提示,選擇所需功能後,執行如下命令:
cd vue3-boilerplate
npm install
npm run dev
執行後在本地開發環境中檢視 http://127.0.0.1:5173
此示例頁面:
新增 Tailwind CSS
有了基礎後,現在我們需要一些樣式。按照這個指南,我們安裝Tailwind CSS,然後初始化配置檔案。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
安裝完後,在根目錄中,會有一個 tailwind.config.js
檔案,填充內容如下:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
接下來,我們需要載入 @tailwind
指令,所以在 /src/assets
資料夾中建立tailwind.css
,其中包含以下內容(指令):
@tailwind base;
@tailwind components;
@tailwind utilities;
然後在 /src/assets/main.css
頂部匯入它:
@import "./tailwind.css";
由於我們已經在 /src/main.js
中匯入了 /src/assets/main.css
檔案,所以,現在就可以在專案中使用 Tailwind 的實用類了。
我們在 /src/views/AboutView.vue
中的 h1
標籤新增一些實用類來測試一下:
<template>
<div class="about">
<h1 class="text-xl font-medium text-white">This is an about page</h1>
</div>
</template>
我們也可以在下面單獨定義我們的CSS屬性。要做到這一點,需要安裝這個PostCSS外掛 - postcss-import
。
npm install -D postcss-import
接著,在實用類中使用 @apply
:
<style lang="scss">
.about {
@apply lg:min-h-screen lg:flex lg:items-center;
h1 {
@apply text-xl font-medium text-white;
}
}
</style>
新增 SVG loader (可選)
我比較喜歡SVG,?恰好,我們新的模板可以很容易地匯入SVG影像,但有一個問題--我們必須把它作為元件使用,這意味著需要手動在模板標籤中新增SVG程式碼,然後像這樣匯入。
幸運的是,有這樣一個 vit-svg-loader 包,它基本上可以讓我們在Vue模板中簡單地匯入 .svg
檔案作為元件。
首先,安裝它:
npm install vite-svg-loader --save-dev
在 vite.config.js
配置檔案中新增這個外掛:
import svgLoader from 'vite-svg-loader'
export default defineConfig({
plugins: [vue(), svgLoader()],
...
})
最後,為了測試,把/src/assets/logo.svg
中的 Vue logo 程式碼改成這個,然後儲存:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2454.32 2457.41"><defs><linearGradient id="a" x1="285.11" y1="1790.44" x2="285.7" y2="1789.74" gradientTransform="matrix(2454.32, 0, 0, -2187.24, -699180.9, 3916163.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#41d1ff"/><stop offset="1" stop-color="#bd34fe"/></linearGradient><linearGradient id="b" x1="285.22" y1="1790.33" x2="285.29" y2="1789.46" gradientTransform="matrix(1125.42, 0, 0, -2051.66, -319596.68, 3673197.31)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffea83"/><stop offset="0.08" stop-color="#ffdd35"/><stop offset="1" stop-color="#ffa800"/></linearGradient></defs><path d="M2464.14,381.6,1311.22,2443.21c-23.8,42.57-85,42.82-109.12.46L26.33,381.79C0,335.63,39.47,279.72,91.78,289.08L1245.93,495.37a62.88,62.88,0,0,0,22.27,0l1130-206C2450.35,279.87,2490,335.35,2464.14,381.6Z" transform="translate(-17.94 -17.87)" style="fill:url(#a)"/><path d="M1795.71,18.48,942.53,185.66a31.33,31.33,0,0,0-25.25,28.9L864.8,1101a31.33,31.33,0,0,0,29.41,33.14,31.77,31.77,0,0,0,8.91-.75l237.54-54.82a31.32,31.32,0,0,1,37.73,36.79l-70.57,345.59a31.33,31.33,0,0,0,39.8,36.24l146.72-44.57a31.34,31.34,0,0,1,39.79,36.32L1222,2031.73c-7,33.95,38.14,52.47,57,23.36l12.59-19.44L1986.77,648.19c11.65-23.23-8.44-49.72-33.94-44.79l-244.52,47.18a31.33,31.33,0,0,1-36-39.44L1831.86,57.91a31.34,31.34,0,0,0-36.14-39.43Z" transform="translate(-17.94 -17.87)" style="fill:url(#b)"/></svg>
然後在 /src/App.vue
檔案中,把它作為SVG元件匯入,並用<img class="logo" />
替換它。
<script setup>
...
import LogoSVG from './assets/logo.svg?component'
</script>
<template>
...
<LogoSVG alt="Vite logo" class="logo" />
...
</template>
至此,一個簡單的模板框架就搭建完啦。
下一步是什麼?
你可以將它,釋出到 npm 上,然後可以類似的命令安裝:
npm i @richardecom/vue3-boilerplate
下面還有份清單,你可以選擇性新增進去:
編輯中可能存在的bug沒法實時知道,事後為了解決這些bug,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
作者:Andy Chen 譯者:小智 來源:medium
https://medium.com/js-dojo/cu...
交流
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。