vite搭建完整项目

1.开始 | Vite 官方中文文档 (vitejs.dev) 点击进入vite官网。

2.scss安装

3.安装路由安装 | Vue Router (vuejs.org)

1.开始 | Vite 官方中文文档 (vitejs.dev) 点击进入vite官网。

（1）点击上方网址，进入vite官网，选择一个命令安装方式。

(1）打开vs code 点击终端，新建终端

（2）输入命令后，回车，输入项目名称，昵称随意，我这里用的是 viteprojects，回车。

（3）选择框架回车，我这里选这vue

（3）选择自己要用的语言后，回车

（4）cd + 项目名称进入 npm install初始化，简写（npm i）最后 npm run dev

(5) 复制网址打开即可

2.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";'}}}
})

3.安装路由安装 | Vue Router (vuejs.org)

（1）点击链接进入，选择使用安装命令。在终端输入选择的命令 npm install vue-router@4

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

俩文件夹内容分别是：

1.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.titleif (_title) {window.document.title = _title}
})// 导出默认值
export default router2.routers文件中的内容// 导出 routes
const routes = [{path: "/",redirect:"/home"},{path:'/home',name:"home",component:()=> import("../views/home.vue")}
]
export default routes

（3）main.js中引入使用