一篇带给你Vite 功能概览

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 } fromvue import App from./App.vue import router from./router createApp(App) .use(router) .mount(#app) 

\src\router\index.js:

import  {  createRouter, createWebHistory }  fromvue-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 

很赞哦!（74）