[[406618]]

Vite 功能概覽

功能| https://cn.vitejs.dev/guide/features.html

CSS 支持

CSS Modules

.red{ 
  color: rosybrown; 
} 

\src\components\Css.vue：

<template> 
  <hr /> 
  <h2>CSS支持</h2> 
  <pclass="red">引入外部CSS文件</p> 
  <pclass="bule">自己的 CSS 代碼</p> 
</template> 
 
<script> 
export default {}; 
</script> 
 
<style> 
@import ". 
./assets/style" ; 
.bule { 
  color: blue; 
} 
</style> 

sass預處理器

Vite 也同時提供了對 .scss, .sass, .less, .styl 和 .stylus 文件的內置支持。沒有必要為他們安裝特定的 vite 插件，但相應的預處理器依賴本身必須安裝：

src\assets\style.sass：

$bg: red 
.li 
  color: $bg 

src\components\Users.vue：

<stylelang="sass"> 
// 導入 CSS(sass) 文件 
@import'../assets/style' 
$blues: blue 
ul 
  li 
    color: $blues 
.lis 
  color: $blues 
</style> 

JSON

JSON 可以被直接導入 - 同樣支持具名導入：

<template> 
  <hr /> 
  <h2>CSS支持</h2> 
  <pclass="red">引入外部CSS文件</p> 
  <pclass="bule">自己的 CSS 代碼</p> 
  <h3>獲取 json 文件數據：</h3> 
  <pv-for=" i in users" :key="i.id"> 
    {{i.username}} 
  </p> 
</template> 
 
<script> 
import datas from '../assets/data.json' 
export default { 
  data(){ 
    return { 
     users:datas 
    } 
  }, 
  mounted(){ 
   console.log(datas) 
  } 
}; 
</script> 
 
<style> 
@import "../assets/style" ; 
.bule { 
  color: blue; 
} 
</style> 

路由

安裝路由模塊

npm install vue-router@4 

\src\main.js:

import {createApp } from'vue' 
import App from'./App.vue' 
import router from'./router' 
 
createApp(App) 
.use(router) 
.mount('#app') 

\src\router\index.js:

import  { createRouter, createWebHistory }  from'vue-router' 
import Hello from'../components/HelloWorld.vue' 
 
const routes = [ 
  { 
    path:'/', 
    name:'Hello', 
    component: Hello 
  }, 
  { 
    path:'/about', 
    name:'About', 
    component: () =>import('../components/About.vue') 
  } 
] 
 
exportdefaultcreateRouter({ 
  history:createWebHistory(), 
  routes 
}) 

\src\App.vue

<template> 
  <imgalt="Vue logo" src="./assets/logo.png" /> 
 <router-view/> 
</template> 

配置選項

npm install element-plus --save