【vite】搭建完整项目流程、项目配置

fruge365

发布于 2025-12-15 11:19:17

5780

参考文章：vite搭建完整项目

完整项目源码

觉得创建太麻烦就直接从github克隆吧，https://github.com/fruge365/vite-common

项目技术栈：

Vue3 + Vite + Js + Pinia + Navie UI

项目地址：

一、创建项目

1.选择一个你常用的命令进行安装

npm create vite@latest yarn create vite pnpm create vite bunx create-vite

tips：使用vite创建项目需要查看自己电脑的node版本是都满足下图

2.打开 vsCode 点击终端，新建终端，也可以使用快捷键 ctrl + shift + ` 3.输入命令后，回车，输入项目名称，昵称随意，我这里用的是 viteprojects，回车。 4.选择框架回车，我这里选这vue

5.选择自己要用的语言后，回车，这里我选的js

6.cd + 项目名称进入 npm install初始化，简写（npm i）最后 npm run dev （我这里全程用的yarn）

7.复制网址打开即可

二、安装scss

1.在项目终端中输入面的命令

npm install sass -d

2.在src/assets文件夹下新建，scss文件夹(文件名称随意)，在文件夹下新建main.scss文件

3.在vite.config.js文件中添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:'@import "./src/assets/sass/main.scss";'
      }
    }
  }
})

三、安装路由router

1.使用安装命令。在终端输入选择的命令

npm install vue-router@4

2.在src下新建ruter文件夹。在ruter文件夹下新建俩个js文件，进行路由配置

3.俩文件夹内容分别是（仅供参看，具体配置看个人需求）：

index文件中内容

// 导入router所需的方法
import { createRouter, createWebHistory } from 'vue-router'
// 导入路由页面的配置
import routes from './routes';

// 路由参数配置
const router = createRouter({
    // 使用hash(createWebHashHistory)模式，(createWebHistory是HTML5历史模式，支持SEO)
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        // 始终滚动到顶部
        return { top: 0 };
    }
})

// 全局前置守卫，这里可以加入用户登录判断
router.beforeEach((to, from, next) => {
    // 继续前进 next()
    // 返回 false 以取消导航
    next()
})

// // 全局后置钩子，这里可以加入改变页面标题等操作
router.afterEach((to, from) => {
    const _title = to.meta.title
    if (_title) {
        window.document.title = _title
    }
})

// 导出默认值
export default router

routers文件中的内容

// 导出 routes
const routes = [
    {
        path: "/",
        redirect: "/home"
    },
    {
        path: '/home',
        name: "home",
        component: () => import("../views/home.vue")
    }
]
export default routes

4.main.js中引入使用