vite搭建完整项目

目录

一、创建项目

二、scss安装 

三、安装路由


一、创建项目

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

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

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

vite搭建完整项目_第1张图片

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

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

vite搭建完整项目_第2张图片

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

vite搭建完整项目_第3张图片

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

vite搭建完整项目_第4张图片

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

 vite搭建完整项目_第5张图片

 (5) 复制网址打开即可

vite搭建完整项目_第6张图片

二、scss安装 

(1)在项目终端中输入面的命令。

npm install sass -d

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

vite搭建完整项目_第7张图片

(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

vite搭建完整项目_第8张图片

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

vite搭建完整项目_第9张图片

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

vite搭建完整项目_第10张图片

你可能感兴趣的:(vue.js,前端,javascript)