首页 前端知识 vite搭建完整项目

vite搭建完整项目

2024-02-13 10:02:55 前端知识 前端哥 561 275 我要收藏

目录

一、创建项目

二、scss安装 

三、安装路由


一、创建项目

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

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

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

   (1)打开 vsCode 点击终端,新建终端,也可以使用快捷键 ctrl + shift + ` 

(2)输入命令后,回车,输入项目名称,昵称随意,我这里用的是 viteprojects,回车。  

(3)选择框架回车,我这里选这vue

(3)选择自己要用的语言后,回车

 (4)cd + 项目名称 进入  npm install初始化,简写(npm i) 最后 npm run dev

 

 (5) 复制网址打开即可

二、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";'
      }
    }
  }
})

三、安装路由

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

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

(3)俩文件夹内容分别是(仅供参看,具体配置看个人需求):

//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

 (4)main.js中引入使用

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1933.html
标签
评论
发布的文章

jQuery 下载与安装教程

2024-02-28 11:02:44

若依中jquey相关问题

2024-02-28 11:02:41

【JavaWeb】1.JQuery

2024-02-28 11:02:21

jQuery日历签到插件下载

2024-02-28 11:02:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!