一篇带给你Vite 功能概览

开发 开发工具
对非常基础的使用来说,使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而,Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。

[[406618]]

Vite 功能概览

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

CSS 支持

CSS Modules

  1. .red{ 
  2.   color: rosybrown; 

\src\components\Css.vue:

  1. <template> 
  2.   <hr /> 
  3.   <h2>CSS支持</h2> 
  4.   <pclass="red">引入外部CSS文件</p> 
  5.   <pclass="bule">自己的 CSS 代码</p> 
  6. </template> 
  7.  
  8. <script> 
  9. export default {}; 
  10. </script> 
  11.  
  12. <style> 
  13. @import ". 
  14. ./assets/style" ; 
  15. .bule { 
  16.   color: blue; 
  17. </style> 

sass预处理器

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

src\assets\style.sass:

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

src\components\Users.vue:

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

JSON

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

  1. <template> 
  2.   <hr /> 
  3.   <h2>CSS支持</h2> 
  4.   <pclass="red">引入外部CSS文件</p> 
  5.   <pclass="bule">自己的 CSS 代码</p> 
  6.   <h3>获取 json 文件数据:</h3> 
  7.   <pv-for=" i in users" :key="i.id"
  8.     {{i.username}} 
  9.   </p> 
  10. </template> 
  11.  
  12. <script> 
  13. import datas from '../assets/data.json' 
  14. export default { 
  15.   data(){ 
  16.     return { 
  17.      users:datas 
  18.     } 
  19.   }, 
  20.   mounted(){ 
  21.    console.log(datas) 
  22.   } 
  23. }; 
  24. </script> 
  25.  
  26. <style> 
  27. @import "../assets/style" ; 
  28. .bule { 
  29.   color: blue; 
  30. </style> 

路由

安装路由模块

  1. npm install vue-router@4 

\src\main.js:

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

\src\router\index.js:

  1. import  { createRouter, createWebHistory }  from'vue-router' 
  2. import Hello from'../components/HelloWorld.vue' 
  3.  
  4. const routes = [ 
  5.   { 
  6.     path:'/'
  7.     name:'Hello'
  8.     component: Hello 
  9.   }, 
  10.   { 
  11.     path:'/about'
  12.     name:'About'
  13.     component: () =>import('../components/About.vue'
  14.   } 
  15.  
  16. exportdefaultcreateRouter({ 
  17.   history:createWebHistory(), 
  18.   routes 
  19. }) 

\src\App.vue

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

配置选项

  1. npm install element-plus --save 

 

责任编辑:姜华 来源: 勾勾的前端世界
相关推荐

2022-03-02 08:52:49

PostmangRPCAPI调试

2021-05-08 08:36:40

ObjectString前端

2021-10-28 08:51:53

GPIO软件框架 Linux

2023-03-13 09:31:04

2022-02-25 15:50:05

OpenHarmonToggle组件鸿蒙

2021-07-08 07:30:13

Webpack 前端Tree shakin

2021-04-14 07:55:45

Swift 协议Protocol

2021-04-23 08:59:35

ClickHouse集群搭建数据库

2021-07-12 06:11:14

SkyWalking 仪表板UI篇

2022-07-06 07:57:37

Zookeeper分布式服务框架

2022-03-08 08:32:43

Tekton云原生开源

2022-03-01 13:55:27

TektonKubernetes集群

2021-06-28 10:04:12

SpringCloudSleuth微服务

2021-09-22 08:37:02

pod源码分析kubernetes

2021-09-13 07:46:06

Kubectl Kubernetes 工具

2021-05-06 09:41:33

Linux 系统硬件操作系统

2021-05-08 09:02:48

KubeBuilderOperatork8s

2021-03-18 08:53:44

MySQL数据库索引

2023-04-09 21:39:48

JavaScript开源

2022-03-29 08:18:32

位图算法索引技术
点赞
收藏

51CTO技术栈公众号