一篇带给你Vite 功能概览

CSS 支持

CSS Modules

.red{ 
  color: rosybrown; 
} 

\src\components\Css.vue：

sass预处理器

Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为他们安装特定的 vite 插件，但相应的预处理器依赖本身必须安装：

src\assets\style.sass：

$bg: red 
.li 
  color: $bg 

src\components\Users.vue：

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

JSON

JSON 可以被直接导入 - 同样支持具名导入：

路由

安装路由模块

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

配置选项

npm install element-plus --save