【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中引入使用

5.在主文件中添加<router-view></router-view>

四、项目配置

参考文章：
【Vite】配置文件详解
 Vite的常见配置选项详细说明

也可以参考官方配置链接：Vite 官方中文文档