<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    2. 

    <del id="afajh"><form id="afajh"></form></del>
    

    5. 

        1. <th id="afajh"><progress id="afajh"></progress></th>

          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>
          從零到一，如何搭建起完整的 Vue3 前端項目架構(gòu)？
          共
                13266字，需瀏覽
                    27分鐘
                
           ·
          2022-01-11 23:01
          
                    

                    
                    
                    
                    
          前言
          由于 vue3.2 版本的發(fā)布，




          復(fù)制代碼
          4.4 封裝 SVG 的圖標(biāo)組件
          svg 圖標(biāo)比較小，而且都是可讀的 xml 文本，所以我們把它直接放在項目中即可，通過 vite-plugin-svg-icons 插件，實現(xiàn)自動引入 svg 圖標(biāo)。
          配置 vite.config.ts：
          plugins:?[
          ??viteSvgIcons({
          ????iconDirs:?[resolve(process.cwd(),?'src/assets/icons')],
          ????symbolId:?'icon-[dir]-[name]',
          ??}),
          ]
          復(fù)制代碼
          封裝一個 vue 組件：



          復(fù)制代碼
          首先將下載的 .svg 圖標(biāo)放入 @/assets/icons 文件夾下

          復(fù)制代碼
          • name 放置在 @/assets/icons 文件夾下的文件名。
          • color 顏色填充，使用此項會默認(rèn)覆蓋圖標(biāo)顏色。
          5.按需自動引入組件
          unplugin-vue-components[77] 是一款非常強大的插件（極力推薦），核心功能就是幫助你自動按需引入組件，Tree-shakable，只注冊你使用的組件。這里說一下他的兩個核心使用方式和配置方式。
          此插件不僅支持 vue3，同時也支持 vue2，并且支持 Vite、Webpack、Vue CLI、Rollup。
          5.1 安裝與配置
          安裝：
          npm?i?unplugin-vue-components?-D
          復(fù)制代碼
          配置：
          //?vite.config.ts
          import?Components?from?'unplugin-vue-components/vite'

          export?default?defineConfig({
          ??plugins:?[
          ????Components({?/*?options?*/?}),
          ??],
          })
          復(fù)制代碼
          這里的 options 可以配置一些選項，后面提到的組件庫注冊會使用到。
          5.2 改變?nèi)纸M件注冊方式
          我們通常將全局的組件封裝在 @/src/components 中，然后通過 app.component() 注冊全局組件。使用此插件后，無需手寫注冊，直接在模板中使用組件即可：
          這里引入官方的示例：



          復(fù)制代碼
          自動編譯為：



          復(fù)制代碼
          5.3 自動引入組件庫
          在使用組件庫時，常規(guī)組件我們也會注冊到全局，如果使用局部注冊由于頁面中會使用到多個組件，會非常麻煩，所以這個功能絕佳，例如我們使用 ant-design-vue 組件庫。
          直接在模板中使用即可，無需手動注冊或局部引用：

          復(fù)制代碼
          當(dāng)然，你還需要在 vite 中引入它的解析器：
          import?Components?from?'unplugin-vue-components/vite'
          import?{?AntDesignVueResolver?}?from?'unplugin-vue-components/resolvers'

          export?default?defineConfig({
          ??plugins:?[
          ????Components({
          ??????resolvers:?[
          ????????AntDesignVueResolver(),
          ??????]
          ????})
          ??],
          })
          復(fù)制代碼
          目前支持的解析器，根據(jù)你的喜好去選擇：
          • Ant Design Vue[78]
          • Element Plus[79]
          • Element UI[80]
          • Headless UI[81]
          • IDux[82]
          • Naive UI[83]
          • Prime Vue[84]
          • Vant[85]
          • VEUI[86]
          • Varlet UI[87]
          • View UI[88]
          • Vuetify[89]
          • VueUse Components[90]
          • Quasar[91]
          6.樣式
          項目中最好使用通用樣式，可以創(chuàng)建 src/styles 目錄存放，這里推薦一些分類：
          styles
          ??├──?antd?#?組件庫樣式覆蓋，命名自取，這里以?ant?design?為例
          ??├──?color.less?#?顏色
          ??├──?index.less?#?入口
          ??├──?global.less?#?公共類
          ??├──?transition.less?#?動畫相關(guān)
          ??└──?variable.less?#?變量
          復(fù)制代碼
          6.1 預(yù)設(shè)基礎(chǔ)樣式
          相信用過 normalize[92] 的同學(xué)不在少數(shù)，它可以重置 css 樣式，使各瀏覽器效果保持一致。后面的章節(jié)會提到 tailwind.css，它內(nèi)置了預(yù)設(shè)樣式重置的功能，與 normalize 還是有一定的區(qū)別，有興趣的同學(xué)可以了解一下[93]。
          6.2 CSS 預(yù)處理器
          雖然 vite 原生支持 less/sass/scss/stylus，但是你必須手動安裝他們的預(yù)處理器依賴，例如：
          npm?install?-D?less
          復(fù)制代碼
          如何選擇預(yù)處理器？
          推薦使用你是所使用的組件庫的樣式語言，因為 css 預(yù)處理器學(xué)會一種后，入手其他幾乎沒有學(xué)習(xí)成本。
          6.3 開啟 scoped
          沒有加 scoped 屬性，會編譯成全局樣式，造成全局污染。

          復(fù)制代碼
          6.4 深度選擇器
          有時我們可能想明確地制定一個針對子組件的規(guī)則。
          如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符。有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。
          7.布局
          頁面整體布局是一個產(chǎn)品最外層的框架結(jié)構(gòu)，往往會包含導(dǎo)航、頁腳、側(cè)邊欄等。在頁面之中，也有很多區(qū)塊的布局結(jié)構(gòu)。在真實項目中，頁面布局通常統(tǒng)領(lǐng)整個應(yīng)用的界面，有非常重要的作用，所以單獨拆分出來也是非常有必要的。
          在腳手架中，所有的通用布局組件都應(yīng)該放在 src/layouts 中，這種封裝比較簡單，這里就不貼代碼了，大家按照自己實際情況自行發(fā)揮，在此僅提供一下封裝思路。
          7.1 常規(guī)的布局
          BasicLayout
          基礎(chǔ)頁面布局，包含了頭部導(dǎo)航，側(cè)邊欄等。
          BlankLayout
          空白的布局。
          7.2 特殊的布局
          RouteLayout
          如果你的項目在路由切換中需要對某些二級頁面進行緩存，那么推薦你創(chuàng)建一個 RouteLayout，通過路由 meta 中的配置，返回 router-view 或者使用 keep-alive 包裹的 router-view。
          UserLayout
          用于用戶登錄注冊等頁面抽離出來。
          PageLayout
          基礎(chǔ)布局，包含了面包屑等信息，內(nèi)含 slot。
          8.集成 Tailwind.css
          Tailwind.css[94] 在我第一次看到它的時候，內(nèi)心是比較反感的，但實際上手之后又覺得真香。從 vue2 項目中，我已經(jīng)引入了 tailwind，整體的開發(fā)結(jié)果就是，基本很少再使用 
          3. 

          <del id="afajh"><form id="afajh"></form></del>
          

          6. 

              1. <th id="afajh"><progress id="afajh"></progress></th>

                <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  

五月丁香婷婷也去
|
日韩极品毛片
|
国产黄色片在线免费观看
|
亚洲精彩视频
|
无码一区二区三区在线观看
|