小程序模板素材_松原新闻头条_百度官网优化_全网营销平台有哪些

创建项目

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

.