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

已于 2024-05-25 13:27:30 修改
阅读量335 收藏 2
点赞数 11
分类专栏： vue3 文章标签： scss 前端 typescript vue3 vite
于 2024-05-25 13:22:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengzihao1023/article/details/139195817
版权

使用Vite创建一个vue3项目

文章目录

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

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

邓子豪
关注
  • 11
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite+vue3+ts 手把手教你创建一个vue3项目
weixin_59916662的博客
10-17 5万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript
02-08
在使用该架构前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite、vue3和typescript，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配等功能 vue3：...
Vue3+Vite+Ts(手把手教你创建项目)
唯见青山不见君
11-08 1347
手把手教你用Vue3+Vite+Ts搭建vue3项目
【详细步骤】使用Vite创建Vue3项目
最新发布
HQC66666的博客
05-09 1537
Vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。
一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输（第一篇）
热门推荐
qq_17335549的博客
12-29 2万+
【前端工程化实践】手把手教小白搭建 vite + ts + vue3 项目
使用 Vite 创建 Vue 3 项目
qq_43313093的博客
06-13 4073
以上就是使用 Vite 创建 Vue 3 项目的基本流程。需要注意的是，Vite 的开发服务器采用了快速的 HMR（热更新）方案，相比于传统的打包工具开发效率更高，但在生产环境中需要使用打包工具打包部署。另外，Vite 还有很多其他的特性和插件，可以根据实际需要进行使用和配置。等待片刻后，Vite 就会在浏览器中打开一个新的窗口，你就可以开始开发 Vue 3 项目了。其中，my-vue3-app 是项目的名称，你可以根据实际需要进行修改。
vite创建vue3项目
m0_47659279的博客
05-21 2575
这种方式创建的项目最快捷，因为基本依赖都装好了。
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，可免费商用，同时支持PC、平板、手机 ## 项目功能 - 使用Vue3.0开发，单...
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...
vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript
02-18
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 vue3：...
NVM+NODE+VUE+组合API+VITE+TS+Router+VUEX+ElementUI+SASS搭建一个完整的前端项目
10-10
NVM+NODE+VUE+组合API+VITE+TS+Router+VUEX+ElementUI+SASS搭建一个完整的前端项目
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 vue3：...
21.（vue3.x+vite）使用scss.rar
11-15
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue 3 + Vite 如何使用Bootstrap 5
08-01
在 `assets` 目录下，我们需要创建一个 `my.scss` 文件，并在其中导入 Bootstrap 5 的 SCSS 文件：`@import "~bootstrap/scss/bootstrap";`。 在 `src/main.js` 文件中，我们需要导入 `my.scss` 文件，并导入所有 ...
记一次用ts+vuecli4重构项目的实现
11-20
项目背景： 一个以前的项目（ 刚入职实习的时候写的，用的vuecli2 ），然后这次要添加修改东西，...ts+vuex+router这几个肯定是要的，这里的css我选择的是scss，unit测试也来一个 之后一些的选项就自己选择 3. 搭建好后
vite创建Vue3项目
LQlove1的博客
04-05 261
【代码】vite创建Vue3项目。
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 1548
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
Vite创建Vue3项目
weixin_50117915的博客
01-16 1458
Vite创建Vue3项目
vue3+ts+vite .scss
06-03
在 Vue3 + TypeScript + Vite 项目中使用 SCSS 预处理器，你需要遵循以下步骤： 1. 在项目中安装 `sass` 和 `sass-loader`： ``` npm install sass sass-loader --save-dev ``` 2. 确保你的 `tsconfig.json` 中开启了 `"experimentalDecorators": true` 和 `"emitDecoratorMetadata": true` 选项。 3. 在 `vite.config.ts` 中配置 `sass-loader`： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/main.scss";` } } } }); ``` 在这个例子中，我们将 `main.scss` 文件导入到所有的 SCSS 文件中。 4. 创建一个 `main.scss` 文件，并在其中包含您的 SCSS 样式。 ```scss // Variables $primary-color: #007bff; $secondary-color: #6c757d; // Mixins @mixin button-variant($background-color) { background-color: $background-color; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: lighten($background-color, 10%); } &:active { background-color: darken($background-color, 10%); } } // Styles .primary-button { @include button-variant($primary-color); } .secondary-button { @include button-variant($secondary-color); } ``` 5. 在组件中使用您的 SCSS 样式。 ```vue <template> <div> <button class="primary-button">Primary Button</button> <button class="secondary-button">Secondary Button</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'MyComponent' }); </script> <style lang="scss"> /* Additional styles for this component */ </style> ``` 这样，您就可以在 Vue3 + TypeScript + Vite 项目中使用 SCSS 预处理器，并为每个组件编写自己的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值