前端项目学习经历

1.好用的开发软件：WebStrom

2.git仓库：

命令行/软件内嵌，保存在本地仓库，上传远程仓库gitee。

3.AI软件：Cursor、腾讯元宝

4.理解组件、语法：

①单页面开发、多页面开发：配置路由

npm install vue-router@4

src/counter/index.js 

// 1. 导入路由函数和页面组件

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../views/Home.vue' // 首页组件

import Login from '../views/Login.vue' // 登录页组件

 

// 2. 定义路由规则（路径自定义，注意语义化）

const routes = [

  { path: '/', component: Home }, // 根路径→首页

  { path: '/login', component: Login } // /login→登录页

]

 

// 3. 创建路由实例并导出（history模式无#号，必导出）

const router = createRouter({

  history: createWebHistory(), // 推荐用这个模式

  routes // 关联上面的路由规则

})

export default router // 必须导出，供main.js使用

src/App.vue

<template>

  <div>

    <!-- 1. 路由导航（点击切换页面，不用写a标签） -->

    <router-link to="/">首页</router-link>

    <router-link to="/login">登录</router-link>

 

    <!-- 2. 路由出口（页面组件会渲染到这里，拼写不能错！） -->

    <router-view></router-view>

  </div>

</template>

main.js 

import { createApp } from 'vue'

import App from './App.vue'

import router from './router' // 导入路由实例

 

// 关键：.use(router) 挂载路由，再挂载到HTML的#app

createApp(App)

  .use(router) // 这行不能漏，否则路由无效

  .mount('#app')

 

②组件：可组件引用组件

③@路径别名：它的核心作用是避免使用  ../ （相对路径）层级嵌套带来的混乱，比如引入组件时，不用写  ../../components/Button ，直接写  @/components/Button  即可，清晰且不易出错。

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// 引入 path 模块处理路径（Node.js 内置，无需额外安装）

import path from 'path'

 

export default defineConfig({

  plugins: [vue()],

  resolve: {

    alias: {

      // 配置 @ 指向 src 目录

      '@': path.resolve(__dirname, './src')

    }

  }

})