开始一个Vue3项目

Vue3

创建项目

创建项目文件夹 打开文件夹目录

npm init vue@latest

填写项目名称
选择要包含的功能

开发环境：运行项目

cd rr
npm install
npm run dev

项目结构

public: 一些不动的资源，打包后会直接复制到static 不会进行优化
src/assets: 一些静态资源，打包后会进行优化
src/components: 可复用的组件
src/App.vue: 根组件
src/main.js: 项目入口文件, 负责创建 Vue 实例并挂载到 DOM 上
src/styles.css: index.html的样式
src/views: 视图, 一个vue文件是一个页面
src/router/index.js: 路由配置
index.html：应用的主 HTML 文件

vite.config.js

配置文件

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 5173,          // 指定端口
    open: true,          // 自动打开浏览器
    host: '0.0.0.0',     // 允许外部访问（如局域网）
  },
})

尽管可以在此配置文件中配置proxy解决跨域问题，但仅适用在开发环境

/src/router/index.js

添加路由(单页面应用)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // 访问视图的时候懒加载组件
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

createWebHistory()和createWebHashHistory()的区别：前者是 /xxx 的网址，后者是/#/xxx 的网址
在制作iOS webview应用的时候使用后者可以防止链接改变导致链接栏和导航栏出现

RouterView 和 RouterLink

RouterView: 显示视图的地方
直接使用

<RouterView />

RouterLink: 跳转到其他视图的组件

<RouterLink to="组件名称"></RouterLink>

上面的是跳转，下面的是直接替代当前的页面

<RouterLink to="组件名称" replace></RouterLink>