最近整理vue3的知识，所以免不了要创建demo，这篇文章只是介绍如何创建项目、路由设置跳转、组件展示，这里做一个创建demo的一个入门记录（让大家少踩一丢丢坑），在这基础上，就可以根据官方文档，学习vue3的特性了
创建项目
使用vite创建项目:
$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
配置别名
使用resolve.alias配置别名@
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const {resolve} = require('path')
export default defineConfig({
plugins: [vue()],
// 坑：
// 1. 要使用resolve.alias，直接使用alias会提示更换
// 2. 要使用find和replacement，使用之前的'/@/: resolve(...)'方式已过时
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
}
})
创建和使用路由
- 安装：
npm install vue-router@4 - 创建路由文件
// src/router/index.js
// createWebHashHistory这里默认使用的是hash模式
import { createRouter,createWebHashHistory } from "vue-router";
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/components/HelloWorld.vue')
},
{
path: "/life",
name: "lifeCycles",
component: () => import('@/views/lifestyle/life.vue')
},
]
export const router = createRouter({
history: createWebHashHistory(),
routes
})
- 在
main.js使用vue-router插件
import { createApp } from 'vue'
import App from './App.vue'
import { router} from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
- 在
App.vue文件中使用router-view组件
<template>
<router-view></router-view>
</template>
- 创建对应的路由组件
src/views/lifestyle/life.vue
<template>
hello vue3
</template>
-
运行
npm run dev，访问/life路径，就可以看到对应组件
image.png 在页面中实现路由跳转
- 在
life.vue引入useRouter - 在
setup函数中创建router对象，相当于vue2中的this.router - 将跳转封装成一个函数对象，注意这里
setup返回必须是一个对象，如果返回return toHome，会立即执行toHome - 调用方法同vue2，可以直接在
button设置点击事件，也可以写成
<button @click="goOtherPage">跳转页面</button>
methods: {
goOtherPage() {
this.toHome()
}
}
PS: 主要注意两点
-
useRouter只能在setup中使用 -
setup必须返回的是对象
<template>
hello vue3
<button @click="toHome">跳转页面</button>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
name: 'lifeCycles',
setup() {
const router = useRouter()
const toHome = () => {
router.push({
path: '/'
})
}
return {toHome}
}
}
</script>
life.vue
点击跳转后
