vite+vue3+scss+ts项目搭建

本文记录了使用Vite搭建Vue3项目的过程,从初始的webpack搭建到选择Vite快速搭建,遇到的如缺少依赖、版本问题、TS配置、路由设置、Vuex集成以及SCSS安装等问题,并逐一进行了解决,最终成功创建了一个包含路由、状态管理和样式支持的Vue3项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue3出来快一年了,新项目需要使用vue3,现在就记录一下搭建过程和一些坑
本来用webpack已经搭建好了
!和以前差不多
但是想了一下,现在不都推荐vite,决定就用vite了,首先用了一下网上的命令

npm i -g create-vite-app
create-vite-app vue3vite
cd vue3vite
npm i
npm run dev

真的是超级快,秒搭建好了
在这里插入图片描述
但是这里就有问题了,比vue-cli脚手架搭建的项目少了好多东西,这意味着ts、router、scss等等都需要自己再重新装,于是我去了官网https://vitejs.cn/,发现官网的命令不一样,于是我又重新来了一遍

npm init @vitejs/app my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

在这里插入图片描述
居然又不一样,这里多了个文件vite.config.js,我估计类似于以前的vue.config.js,还是使用官方方法好了,现在就只有查一下怎么能变成vue-cli搭建的那样了
在这里插入图片描述
启动居然network没了,原来是安装的vite版本问题

在这里插入图片描述
在这里插入图片描述
1.0.0-rc.13这个版本启动就会有network,于是我把vite版本改了直接npm i
在这里插入图片描述
直接报错,原来版本不一样,vite.config.js里使用的方法已经没了,需要删除vite.config.js,删除后就好了
在这里插入图片描述
官方方法还会出现这个,所以这两种方法搭建的项目,vite版本不能改变,2.3.8应该是新版本,所以还是用第一种方法好了
首先安装ts

npm i typescript

然后初始化tsconfig.json

npx tsc --init

安装vue-router

npm i vue-router

安装vuex

npm i vuex

把main.js改成main.ts,然后报错了,查度娘,原来还要.d.ts文件,于是我直接把webpack那个直接复制过来,这是一个和mian.ts同级,名为shims-vue.d.ts,主要是用于识别vue文件,里面长这样

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

src下再创建router文件夹,创建文件index.ts,内容

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = []

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

创建store文件夹,创建文件index.ts,这里就先不写了内容了
然后main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import vuex from './store'

const app = createApp(App);
app.use(router);
app.use(vuex);
createApp(App).mount('#app')

开始我是import router from './router/index.ts’这样引入的,结果报错,又是看了webpack搭建那个才知道,直接引入,或者我看网上不加.ts也可以
这时我发现vue文件script部分报警告,原来还要在script标签上加上lang=‘ts’
终于只剩最后一步了,安装scss

npm i sass
npm i sass-loader
npm i node-sass

在这里插入图片描述
又报错,原来没有加–save-dev,删除重来

npm i sass --save-dev
npm i sass-loader --save-dev
npm i node-sass --save-dev

在这里插入图片描述
启动成功,没报错了,可以使用路由和scss了,搭建完成

### 安装和配置 SCSSVue 3 项目中使用 Vite 和 TypeScript 为了在基于 ViteVue 3 项目中设置 SCSS 支持,需先确保已安装必要的依赖项。 #### 安装必要工具和支持包 首先确认已经安装了 Node.js (版本 12.0.0 或更高) 和 npm。接着可以全局安装 `create-vite` 来快速搭建项目: ```bash npm install create-vite -g ``` 对于希望集成 SCSS项目的开发者来说,还需要额外安装支持 SCSS 编译的相关 NPM 包。这可以通过运行如下命令完成: ```bash npm install sass --save-dev ``` 上述操作会下载 SASS/SCSS 预处理器及其编译器到开发环境之中[^1]。 #### 创建并修改项目结构 一旦基础构建工具准备就绪,在 src 文件夹内可按照需求定义样式表单文件布局。例如可以在 layout.scss 中引入其他局部使用的 SCSS 文件来组织样式代码: ```scss // _variables.scss $primary-color: #4CAF50; // body.scss body { background-color: $primary-color; } // layout.scss @import "body"; ``` 注意这里 `_variables.scss` 前面加下划线表示这是一个部分文件(partials),不会被单独编译成 CSS 输出文件[^3]。 #### 修改 vite.config.ts 添加 SCSS 支持 为了让 Vite 正确处理 `.vue` 组件内的 `<style lang="scss">` 标签以及外部链接的 .scss 文件,可能需要调整 `vite.config.ts` 文件中的配置选项以加载相应的插件或自定义规则。通常情况下,默认配置就已经足够良好地工作于大多数场景之下;但如果遇到特定情况,则可以根据官方文档进一步定制化设置。 ```typescript /// <reference types="vitest" /> import { defineConfig } from &#39;vite&#39; import vue from &#39;@vitejs/plugin-vue&#39; export default defineConfig({ plugins: [ vue(), ], }) ``` 如果确实有必要扩展默认行为的话,比如想要为所有的 SCSS 文件自动注入某些共享变量或者混合宏(mixins),那么就可以考虑利用 postcss-plugins 或者借助 rollup-plugin-postcss 插件实现更复杂的预处理逻辑。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值