vue3.0+vite+ts+scss项目搭建

最新推荐文章于 2025-03-19 17:40:58 发布

Cryday

最新推荐文章于 2025-03-19 17:40:58 发布

阅读量2.3k

点赞数 1

文章标签： vue.js scss 前端

本文链接：https://blog.youkuaiyun.com/Cryday/article/details/120966268

版权

本文档详细介绍了如何使用Vite快速搭建Vue3.0项目，包括安装依赖、启动项目、引入TypeScript、配置shim.d.ts、安装和配置vue-router、vuex，以及项目结构和文件组织。同时，还涵盖了引入Sass、抽离组件样式和JS的方法。

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

1.使用vite搭建Vue3.0

npm install -g create-vite-app
create-vite-app vue3-vite
cd vue3-vite
npm install
npm run dev
# 或者使用yarn（首选yarn）
yarn add -g create-vite-app
yarn create vite-app <project-name>

2.安装依赖

yarn

3.启动项目

yarn dev
或
npx vite

4.引入typescript

yarn add typescript -D

5.初始化tsconfig.json,执行下面命令，生成tsconfig.json文件

npx tsc --init

6.将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts

然后在script 里添加 lang=“ts”

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

7.修改完之后，重启就可以访问项目了。虽然这样配置是可以了，但是打开main.ts会发现import App from App.vue会报错:Cannot find module './App.vue' or its corresponding type declarations.,这是因为现在ts还没有识别vue文件，需要进行下面的配置:

在项目根目录添加shim.d.ts文件，然后添加代码段

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

8.安装sass, sass-loader, node-sass

npm install sass --save-dev
npm install sass-loader --save-dev
npm install node-sass --save-dev

使用：

<style scoped lang="scss">
@import './index.scss';
</style>

.home {
  width: 100%;
  height: 100%;
  background:#fff;

  p {
    font-size: 16px;
    color: red;
  }
}

9.安装vue-router，可以使用vue-router4.0

yarn add vue-router@4.0
或
npm install vue-router -S

配置vue-router

在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

或者使用

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

const routes: Array<RouteRecordRaw> = []

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

export default router

10.也可以加入vuex

安装vuex

npm install vuex -S

在sr目录下面创建store文件夹，创建文件index.ts,这里就先不写了内容了

router和store如下图：

然后main.ts引入

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

const app = createApp(App);

app.use(router)
app.use(vuex)
app.mount('#app')

最后，项目就可以启动项目了，比较简易的项目搭建，还可以添加其他，如，axios等等。

11. 如果要抽离Vue中的js, css，可以建各自文件如下图：

抽离css,引入方式如下：

<style scoped lang="scss">
@import './index.scss';
</style>

抽离js，引入方式如下：

<script lang="ts">
import { defineComponent } from "vue";
// 引入js文件
import Index from './index';
// 使用js对象
export default defineComponent({
  ...Index,
});
</script>