VUE_使用Vite构建vue项目

创建项目

// 安装vite
npm install vite

// 创建名为vite-app的项目
npm create vite vite-app --template vue

// 到项目目录
cd vite-app

// 安装依赖
npm install

// 运行项目
npm run dev

// 打包
npm run build

// 打包预览
npm run serve

增加路由

// 安装路由
npm add vue-router@4

router/index.js

import { createWebHashHistory, createRouter } from 'vue-router'

const routes = [
	{
		path: '/',
		component: () => import("../pages/index.vue")
	},
	{
		path: '/HelloWorld',
		component: () => import("../pages/HelloWorld.vue")
	}
]

const router = createRouter({
	history: createWebHashHistory(),
	routes,
})

export default router

main.js

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

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

App.vue

<template>
	<router-link to="/">index</router-link> |
	<router-link to="/HelloWorld">HelloWorld</router-link> 
    <router-view></router-view>
</template>

index.vue

<template>
	<div>
		这是首页
	</div>
</template>

<script setup>
	import { ref, onMounted, onUnmounted } from 'vue'

	const num = ref(0)
	console.log(num.value)

	onMounted(() => {})
	onUnmounted(() => {})
</script>

<style lang='scss' scoped>
	
</style>

.