一篇带给你Vite 功能概览-vite cli

[[406618]]

Vite 功能概览

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

CSS 支持

CSS Modules

.red{ 
  color: rosybrown; 
} 
1.
2.
3.

\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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

sass预处理器

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

src\assets\style.sass：

$bg: red 
.li 
  color: $bg 
1.
2.
3.

src\components\Users.vue：

<stylelang="sass"> 
// 导入 CSS(sass) 文件 
@import'../assets/style' 
$blues: blue 
ul 
  li 
    color: $blues 
.lis 
  color: $blues 
</style> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

路由

安装路由模块

npm install vue-router@4 
1.

\src\main.js:

import {createApp } from'vue' 
import App from'./App.vue' 
import router from'./router' 
 
createApp(App) 
.use(router) 
.mount('#app') 
1.
2.
3.
4.
5.
6.
7.

\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 
}) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

\src\App.vue

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

配置选项

npm install element-plus --save 
1.