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.title
    if (_title) {
        window.document.title = _title
    }
})

// 导出默认值
export default router

2.routers文件中的内容

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

 （3）main.js中引入使用