<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>
          逐步搭建出團(tuán)隊(duì)的 vue3 前端架構(gòu)
          共
                13326字，需瀏覽
                    27分鐘
                
           ·
          2021-11-19 14:16
          
                    

                    
                    
                    
                    

          作者：codexu
          https://juejin.cn/post/7025524870842679310
          前言
          由于?vue3.2?版本的發(fā)布，




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



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

          復(fù)制代碼
          • name 放置在 @/assets/icons 文件夾下的文件名。
          • color 顏色填充，使用此項(xiàng)會(huì)默認(rèn)覆蓋圖標(biāo)顏色。
          5.按需自動(dòng)引入組件
          unplugin-vue-components[77]?是一款非常強(qiáng)大的插件（極力推薦），核心功能就是幫助你自動(dòng)按需引入組件，Tree-shakable，只注冊(cè)你使用的組件。這里說(shuō)一下他的兩個(gè)核心使用方式和配置方式。
          此插件不僅支持 vue3，同時(shí)也支持 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 可以配置一些選項(xiàng)，后面提到的組件庫(kù)注冊(cè)會(huì)使用到。
          5.2 改變?nèi)纸M件注冊(cè)方式
          我們通常將全局的組件封裝在?@/src/components?中，然后通過(guò)?app.component()?注冊(cè)全局組件。使用此插件后，無(wú)需手寫(xiě)注冊(cè)，直接在模板中使用組件即可：
          這里引入官方的示例：



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



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

          復(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.樣式
          項(xiàng)目中最好使用通用樣式，可以創(chuàng)建?src/styles?目錄存放，這里推薦一些分類：
          styles
          ??├──?antd?#?組件庫(kù)樣式覆蓋，命名自取，這里以?ant?design?為例
          ??├──?color.less?#?顏色
          ??├──?index.less?#?入口
          ??├──?global.less?#?公共類
          ??├──?transition.less?#?動(dòng)畫(huà)相關(guān)
          ??└──?variable.less?#?變量
          復(fù)制代碼
          6.1 預(yù)設(shè)基礎(chǔ)樣式
          相信用過(guò)?normalize[92]?的同學(xué)不在少數(shù)，它可以重置 css 樣式，使各瀏覽器效果保持一致。后面的章節(jié)會(huì)提到 tailwind.css，它內(nèi)置了預(yù)設(shè)樣式重置的功能，與 normalize 還是有一定的區(qū)別，有興趣的同學(xué)可以了解一下[93]。
          6.2 CSS 預(yù)處理器
          雖然 vite 原生支持 less/sass/scss/stylus，但是你必須手動(dòng)安裝他們的預(yù)處理器依賴，例如：
          npm?install?-D?less
          復(fù)制代碼
          如何選擇預(yù)處理器？
          推薦使用你是所使用的組件庫(kù)的樣式語(yǔ)言，因?yàn)?css 預(yù)處理器學(xué)會(huì)一種后，入手其他幾乎沒(méi)有學(xué)習(xí)成本。
          6.3 開(kāi)啟 scoped
          沒(méi)有加 scoped 屬性，會(huì)編譯成全局樣式，造成全局污染。

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

中国性爱在线
|
极品女神偷情
|
久操无码|
欧美熟女在线
|
大香蕉精品在线观看
|