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> JSONJSON 可以被直接导入 - 同样支持具名导入： <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 |
喜欢
讨厌