【vue3】初学学习笔记

安装Vue

安装教程：
https://blog.csdn.net/weixin_49136054/article/details/129624923

创建、启动项目

创建、启动等基础操作-快速上手文档
https://cn.vuejs.org/guide/quick-start.html

创建和初始化vue项目：

npm create vue@latest
cd project_name
npm install
// 如果需要用到element-ui，则还要执行如下命令：
npm install element-plus

启动vue

npm run dev

初始化main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Home from './home.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(Home)

app.use(router)
app.use(ElementPlus)
app.mount('#app')

• 修改端口号命令
  当启动两个vue项目时，端口是一样的，通过以下操作修改端口号：

在启动vue项目的时候在后面自己加入端口:
npm run dev -- --port 81

• 对按钮绑定点击事件，实现页面跳转

路由router

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

问题

• vue文件中