【Vite】2.0 Vite構建Vue3項目，CSS使用

vite創建項目，Win+R，cmd：

輸入vite-vue3

這裏我們選擇vue

教程建議選擇vue，後面會切換成vue-ts，這裏我們偏不，就選vue-ts：

這樣，我們項目創建完成。
通過vscode打開：

vite初始化運行爲按需加載。
在項目運行時，會檢測./index.html文件，通過<script type="module" src="/src/main.ts"></script>加載ts、vue文件。
vite.config.ts用於存放vite的配置的地方。
目前只有vue3官方提供的plugin。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
})

這裏plugin-vue支持app.vue,但不支持app.jsx、app.tsx.如果需要，需要安裝vue3官方提供的一個插件plugin-vue-jsx

npm i安裝依賴庫。

運行項目：

運行項目地址：

安裝插件plugin-vue-jsx：
npm install -d 就是 npm install --save-dev 安裝到開發環境 例如 gulp ，babel，webpack 一般都是輔助工具

npm insatll -s 就是npm install --save 安裝到生產環境 如 vue ,react 等
這裏我們用-D

npm install -D @vitejs/plugin-vue-jsx

修改vite.config.ts引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), vueJsx()],
})

刪除src\App.vue，新建src\App.tsx

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => {
      return <div>Hello Vue3 Tsx</div>
    }
  }
})

修改./main.ts

import { createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')

這就改寫tsx文件模式了。

Vite中使用CSS

• Vite支持原生最新的CSS——css variable
• 集成了postcss。
• @import alias
• css-modules
• css pre-processors

Vite支持原生最新的CSS——css variable

基本css使用：
新建`src\style\index.css

.root {
    color: red;
}

修改src\App.tsx

import { defineComponent } from 'vue'
import '@/style/index.css'
export default defineComponent({
    setup() {
        return () => {
            return <div class="root">Hello Vue3 Tsx</div>
        }
    },
})

css variables讓我們可以在CSS中使用變量。
在頂級自定義了變量，變量名前一定要有兩個-，否則不生效；然後使用var()方式來獲取變量值。

:root {
  --my-color: red;
}

.container {
  /* --my-color: blue; */
  color: var(--my-color);
}

.child {
  color: var(--my-color);
}

變量可以被覆蓋，如果在低層級重新賦值則會覆蓋樣式。

還可以設置默認值，比如var(--invalid-color, red)，如果變量不存在，則會使用第二個參數

const child = document.querySelector('.child')

console.log(getComputedStyle(child).getPropertyValue('--my-color'))

child.style.setProperty('--my-color', 'purple')

還可以通過js獲取和設置css varible的值
瀏覽器支持方面：IE全不支持。

修改src\style\index.css

:root {
    --main-bg-color: brown;
}
.root {
    color: var(--main-bg-color);
}

:root是一個命名空間。

集成了postcss

Postcss 是一個使用js插件來轉換樣式的工具，Postcss 的插件會檢查你的css。
postcss 一種對css編譯的工具，類似babel對js的處理，

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

3 . 自動把px代爲轉換成rem

4 . css 代碼壓縮等等

postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。

與 less sass 的區別

less sass 是預處理器，用來支持擴充css語法。

postcss 既不是 預處理器也不是 後處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用
使用:
新建./postcss.config.js

module.exports = {
    //讓編譯css時進行輸出
    plugins: [require('@postcss-plugins/console')],
}

修改src\style\index.css

:root {
    --main-bg-color: blue;
}
/* 進入root這個class時進行輸出 */
.root {
    @console.error Here comes
    color: var(--main-bg-color);
}

未知原因導致配置不報錯，但沒有生效。

@import alias

爲防止出現無數的路徑指引長度。可以配置修改vite.config.ts如下：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// import postcssImport from "postcss-import"
// import autoprefixer from 'autoprefixer'
// import tailwindcss from 'tailwindcss'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), vueJsx()],
    resolve: {
        alias: {
            '@': '/src',
            '@style': '/src/style',
        },
    },
    //樣式表插件
    css: {
        postcss: {
            plugins: [
                // postcssImport,
                // autoprefixer,
                // tailwindcss
            ],
        },
    },
})

這樣，在src\App.tsx中就可以修改如下：

import { defineComponent } from 'vue'
import '@style/index.css'
export default defineComponent({
    setup() {
        return () => {
            return <div class="root">Hello Vue3 Tsx</div>
        }
    },
})

此規則也可以使用到css文件中。
比如新建src\style\other.css

div {
    background-color: green;
}

可以在src\style\index.css引入：

@import url('@style/other.css');
:root {
    --main-bg-color: blue;
}
/* 進入root這個class時進行輸出 */
.root {
    color: var(--main-bg-color);
}

css-modules

所有的 class 的名稱和動畫的名稱默認屬於本地作用域的 CSS 文件。所以 CSS Modules 不是一個官方的規範，也不是瀏覽器的一種機制，它是一種構建步驟中的一個進程。（構建通常需要 webpack 或者 browserify 的幫助）。通過構建工具的幫助，可以將 class 的名字或者選擇器的名字作用域化。（類似命名空間化）。

css modules優勢

• 解決全局命名衝突問題 css modules只關心組件本身 命名唯一
• 模塊化 可以使用composes來引入自身模塊中的樣式以及另一個模塊的樣式
• 解決嵌套層次過深的問題 使用扁平化的類名

vite用法：只需要申明xxx.module.css即可識別爲css-module。
src\style\test.module.css

.moduleClass {
    color: yellow;
}

修改src\App.tsx

import { defineComponent } from 'vue'
import '@style/index.css'
import classes from '@style/test.module.css'
export default defineComponent({
    setup() {
        return () => {
            return (
                <div class={`root  ${classes.moduleClass}`}>Hello Vue3 Tsx</div>
            )
        }
    },
})

css pre-processors

比方我們需要使用scss：

npm install -D sass

新增src\style\test.scss

$bgColor: red;
.root {
    background-color: $bgColor;
}

修改src\App.tsx

import { defineComponent } from 'vue'
import '@style/test.scss'
import classes from '@style/test.module.css'
export default defineComponent({
    setup() {
        return () => {
            return (
                <div class={`root  ${classes.moduleClass}`}>Hello Vue3 Tsx</div>
            )
        }
    },
})