vue3入门篇

最近整理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') }],
  }
})

创建和使用路由

1. 安装：npm install vue-router@4
2. 创建路由文件

// 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
})

3. 在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')

4. 在App.vue文件中使用router-view组件

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

5. 创建对应的路由组件src/views/lifestyle/life.vue

<template>
  hello vue3
</template>

6. 运行npm run dev，访问/life路径，就可以看到对应组件
   

   image.png

7. 在页面中实现路由跳转

• 在life.vue引入useRouter
• 在setup函数中创建router对象，相当于vue2中的this.router
• 将跳转封装成一个函数对象，注意这里setup返回必须是一个对象，如果返回return toHome，会立即执行toHome
• 调用方法同vue2，可以直接在button设置点击事件，也可以写成

<button @click="goOtherPage">跳转页面</button>
methods: {
    goOtherPage() {
      this.toHome()
    }
  }

PS: 主要注意两点

1. useRouter只能在setup中使用
2. 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 点击跳转后