vue3.0+ts+vite+scss创建一个vue项目

news2024/11/19 9:21:05

使用Vite创建一个vue3项目

文章目录

        • 1、创建vue3项目
        • 2、安装less/scss
        • 3、自动导入

1、创建vue3项目

npm

​npm create vite@latest

yarn

​yarn create vite

输入新项目名字(例子:vueDemo)
在这里插入图片描述
按上下选择框架,vue按回车
​​​​在这里插入图片描述
选择TS
在这里插入图片描述
项目创建成功了
在这里插入图片描述

在这里插入图片描述

2、安装less/scss

由于是使用vite,vite它提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;国内一般只使用 less 或 scss,所以我只写这两个安装

安装less依赖

 npm add -D less 

安装scss and sass 依赖

 npm add -D sass 

安装后可以直接使用less了 ,当然,也可以使用scss,一般只下一个就够了,我比较推荐scss

3、自动导入

通过npm导入node_modules

npm install

在这里插入图片描述
现在项目可以运行了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1692185.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java进阶学习笔记5——Static应用知识:单例设计模式

设计模式: 架构师会使用到设计模式,开发框架,就需要掌握很多设计模式。 在Java基础阶段学习设计模式,将来面试笔试的时候,笔试题目会经常靠到设计模式。 将来会用到设计模式。框架代码中会用到设计模式。 什么是设计…

【Flutter】AspectRatio组件Card组件按钮组件Wrap组件

🔥 本文由 程序喵正在路上 原创,CSDN首发! 💖 系列专栏:Flutter学习 🌠 首发时间:2024年5月25日 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾 目…

开源内网穿透神器:中微子代理(neutrino-proxy)实现内网穿刺

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

go select 原理

编译器会使用如下的流程处理 select 语句: 将所有的 case 转换成包含 channel 以及类型等信息的 runtime.scase 结构体。调用运行时函数 runtime.selectgo 从多个准备就绪的 channel 中选择一个可执行的 runtime.scase 结构体。通过 for 循环生成一组 if 语句&…

计算机网络——TCP 协议的三次握手 / 四次挥手

简述 TCP / UDP 协议都是传输层的协议。 UDP 是面向无连接的协议,就是说发送端不在乎消息数据是否传输到接收端了,所以会出现数据丢失的情况,所以可靠性也不高。 TCP 是面向连接的、可靠的、基于字节流的传输层协议。所谓面向连接的&#…

win11 wsl ubuntu24.04

win11 wsl ubuntu24.04 一:开启Hyper-V二:安装wsl三:安装ubuntu24.04三:桥接模式,固定IP四:U盘使用五:wsl 从c盘迁移到其它盘参考资料 一:开启Hyper-V win11家庭版开启hyper-v 桌面…

【Crypto】RSA

文章目录 题目步骤1.计算 𝑛2.计算欧拉函数 𝜙(𝑛)3. 扩展欧几里得算法求逆元 𝑑 解题感悟 题目 p473398607161 q4511491 e17 求d 步骤 1.计算 𝑛 公式:npq n47339860716145114912135733555619387051 …

微信小程序知识点1

一. 页面样式和结构 1.1 小程序组件(html) (1) 区域布局组件 view 定义块级区域,相当于网页中的 div 标签text 定义行内区域,相当于网页中的 span标签 (2) 链接跳转组件 navigator 组件相当于网页中的 a 标签,用来实现页面之间的跳转。 …

基于大数据的支付风险智能防控技术规范

随着大数据、移动互联、人工智能、生物特征识别等技术的快速发展,支付方式正在发生着巨大而深刻的变革,新技术在丰富支付手段、提高支付效率的同时,带来了新的隐患,也对从业机构的风险防控能力提出了更高的要求。 传统的风控技术…

机器学习--数学部分笔记

前言 因为周三要考试,所以数学部分写一下笔记 正文 随机事件和随机实验 条件概率 • 在已知事件 𝐵 发生的条件下,事件𝐴发生的概率称为事件 𝐴 的条件概率,记为𝑃(𝐴|𝐵) 全概率…

Java 解决 古典问题

1 问题 编写一个Java程序,解决以下问题: 2 方法 再导入java.util包下的Scanner类,构建Scanner对象,以便输入。通过对问题的分析,我们可以得到,当位数为1时,其返回值为1;当位数为2时&…

部署LAMP平台

目录 一、LAMP简介与概述 1.1 各组件作用 1.2 LAMP平台搭建时各组件安装顺序 1.3 httpd服务的目录结构 1.4 httpd.conf配置文件 二、编译安装Apache httpd服务 2.1 关闭防火墙,将安装Apache所需软件包传到/opt目录下 2.2 安装环境依赖包 ​2.3 配置软件模块…

浅论未来 IT 和财务结合的趋势

前言 会计核算企业各类业务单据,所有业务部门的数据都会汇流到财务部来,所以会计其实是企业的数据中心;而 IT 技术正是处理数据的利器,可以将重复的流程自动化,还能将财务数据可视化;因此,两者…

路由_传递params参数和query参数

传递params参数 传递params参数可以直接在路径后面加上参数: 上述就是在路径变化的时候传过去三个值分别为哈哈、嘿嘿、呵呵的参数 但是这样的话会被认为三个参数是路径的一部分,计算机没有办法区分哪些是路径哪些是参数,所以首先要在这条路…

练习题(2024/5/23)

1单词接龙 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> ... -> sk&#xff1a; 每一对相邻的单词只差一个字母。 对于 1 < i < k 时&#xff0c;每个 si 都在 wordList 中。注意&#…

继“三级淋巴结”之后,再看看“单细胞”如何与AI结合【医学AI|顶刊速递|05-25】

小罗碎碎念 24-05-25文献速递 今天想和大家分享的是肿瘤治疗领域的另一个热点——单细胞技术&#xff0c;我们一起来看看&#xff0c;最新出炉的顶刊&#xff0c;是如何把AI与单细胞结合起来的。 另外&#xff0c;今天是周末&#xff0c;所以会有两篇文章——一篇文献速递&…

CATO原理中的数学与魔术(十)——Parity Principle及其应用一:集合的基本性质...

在前面的文章中&#xff0c;我们介绍了CATO原理的数学模型以及两个经典的魔术应用系列&#xff1a;Baby Hummer和Royal Hummer&#xff0c;以及它们的拓展&#xff0c;详情请戳&#xff1a; 传送门 CATO原理中的数学与魔术&#xff08;九&#xff09;——Royal Hummer 及其进阶…

Vue.js - Vue 的安装 以及 常用的 Vue 指令 【0基础向 Vue 基础学习】

文章目录 Vue 快速上手1、Vue.js 官网 & Vue.js 的获取2、创建 Vue 实例&#xff0c;初始化渲染3、插值表达式 安装 Vue 开发者工具&#xff1a;装插件调试 Vue 应用Vue 指令1、v-show 指令2、v-if3、v-else & v-else-if4、v-onv-on 调用传参 5、v-bindv-bind 对于样式…

[数据结构] -- 单链表

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;C打怪之路&#xff0c;python从入门到精通&#xff0c;数据结构&#xff0c;C语言&#xff0c;C语言题集&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文(平均质量分82)&#…

订单id的设计问题探讨

如何设计一个订单id 设计一个订单ID系统需要考虑多个因素&#xff0c;包括唯一性、排序性&#xff08;时间顺序&#xff09;、可读性&#xff08;可选&#xff09;以及系统的扩展性和性能。结合这些因素&#xff0c;可以选择不同的方案来生成订单ID。以下是几种常见的订单ID设…