vite創(chuàng)建項(xiàng)目名斟，Win+R，cmd：

image.png

輸入vite-vue3

image.png

image.png

教程建議選擇vue魄眉，后面會(huì)切換成vue-ts砰盐，這里我們偏不，就選vue-ts：

image.png

image.png

image.png

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官方提供的一個(gè)插件plugin-vue-jsx

npm i安裝依賴庫(kù)膘魄。

image.png

image.png

image.png

image.png

安裝插件plugin-vue-jsx：
npm install -d 就是 npm install --save-dev 安裝到開(kāi)發(fā)環(huán)境 例如 gulp 乌逐，babel，webpack 一般都是輔助工具

npm insatll -s 就是npm install --save 安裝到生產(chǎn)環(huán)境 如 vue ,react 等
這里我們用-D

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

image.png

修改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>
        }
    },
})

image.png

css variables讓我們可以在CSS中使用變量灿渴。
在頂級(jí)自定義了變量嘀韧，變量名前一定要有兩個(gè)-悬钳，否則不生效播演；然后使用var()方式來(lái)獲取變量值。

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

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

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

變量可以被覆蓋缚窿，如果在低層級(jí)重新賦值則會(huì)覆蓋樣式。

還可以設(shè)置默認(rèn)值焰扳，比如var(--invalid-color, red)倦零，如果變量不存在，則會(huì)使用第二個(gè)參數(shù)

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

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

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

還可以通過(guò)js獲取和設(shè)置css varible的值
瀏覽器支持方面：IE全不支持吨悍。

修改src\style\index.css

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

:root是一個(gè)命名空間扫茅。

image.png

集成了postcss

Postcss 是一個(gè)使用js插件來(lái)轉(zhuǎn)換樣式的工具，Postcss 的插件會(huì)檢查你的css育瓜。
postcss 一種對(duì)css編譯的工具葫隙，類似babel對(duì)js的處理，

1 . 使用下一代css語(yǔ)法

2 . 自動(dòng)補(bǔ)全瀏覽器前綴

3 . 自動(dòng)把px代為轉(zhuǎn)換成rem

4 . css 代碼壓縮等等

postcss 只是一個(gè)工具躏仇，本身不會(huì)對(duì)css一頓操作停蕉，它通過(guò)插件實(shí)現(xiàn)功能，autoprefixer 就是其一钙态。

與 less sass 的區(qū)別

less sass 是預(yù)處理器慧起，用來(lái)支持?jǐn)U充css語(yǔ)法。

postcss 既不是 預(yù)處理器也不是 后處理器册倒，其功能比較廣泛蚓挤，而且重要的一點(diǎn)是，postcss可以和less/sass結(jié)合使用
使用:
新建./postcss.config.js

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

修改src\style\index.css

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

未知原因?qū)е屡渲貌粓?bào)錯(cuò)驻子，但沒(méi)有生效灿意。

@import alias

為防止出現(xiàn)無(wú)數(shù)的路徑指引長(zhǎng)度〕绾牵可以配置修改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>
        }
    },
})

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

div {
    background-color: green;
}

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

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

image.png

css-modules

所有的 class 的名稱和動(dòng)畫的名稱默認(rèn)屬于本地作用域的 CSS 文件域慷。所以 CSS Modules 不是一個(gè)官方的規(guī)范荒辕，也不是瀏覽器的一種機(jī)制，它是一種構(gòu)建步驟中的一個(gè)進(jìn)程犹褒。（構(gòu)建通常需要 webpack 或者 browserify 的幫助）抵窒。通過(guò)構(gòu)建工具的幫助，可以將 class 的名字或者選擇器的名字作用域化叠骑。（類似命名空間化）李皇。

css modules優(yōu)勢(shì)

• 解決全局命名沖突問(wèn)題 css modules只關(guān)心組件本身 命名唯一
• 模塊化 可以使用composes來(lái)引入自身模塊中的樣式以及另一個(gè)模塊的樣式
• 解決嵌套層次過(guò)深的問(wèn)題 使用扁平化的類名

vite用法：只需要申明xxx.module.css即可識(shí)別為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>
            )
        }
    },
})

image.png

css pre-processors

比方我們需要使用scss：

npm install -D sass

image.png

新增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>
            )
        }
    },
})

image.png