yarn创建vitevue3，安装vue-router

董小礼

已于 2024-01-17 10:22:40 修改

阅读量1.2k

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-01-17 10:12:16 首次发布

本文链接：https://blog.csdn.net/qq_39588818/article/details/135642424

版权

本文详细介绍了如何使用Yarn管理和安装Vue项目，包括设置环境、安装依赖、配置路由、使用vue-router，以及在main.js中集成路由并修改app.vue和vite.config.js以支持SCSS。

摘要由CSDN通过智能技术生成

1.安装项目

yarn create vite my-app

选择环境这里我们选择Vue

我们用的javaScript

安装完毕

cd项目，然后安装依赖

2.运行项目

yarn run dev

3.安装路由

yarn add vue-router

4.配置路由文件

// history模式
import {
	createRouter,
	createWebHashHistory,
} from 'vue-router'

const routes = [
	// 路由的默认路径
	{
		path: '/',
		name: "/",
		component: () => import('../views/index/index.vue')
	}, {
		path: '/detail',
		name: "detail",
		component: () => import('../views/detail/index.vue')
	}
]

// 创建路由对象
const router = createRouter({
	history: createWebHashHistory(),
	routes
})
export default router;

5.入口main.js使用路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

6.修改app.vue

<script setup>
	
</script>

<template>
	<router-view></router-view>
</template>

<style scoped>
	
</style>

7.安装scss

yarn add sass

8.修改vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 上面是默认已存在的  
  
    
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/assets/style/mixin.scss";'
      }
    }
  }

})