一篇带给你Vite 功能概览

[[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