Vue复习 - 技术栈

文章目录

- Vue:前端知识
- [Vue 3准备工作:](#Vue 3准备工作:)
- 构建vue项目
- - [1. 安装Vue项目所有依赖](#1. 安装Vue项目所有依赖)
  - [2. 在idea中打开vue3文件](#2. 在idea中打开vue3文件)
  - 3基础配置
  - - 3.1.在vite.config.js中配置别名，使用@代替src路径。
    - 3.2修改index.html
    - [3.3 创建路由](#3.3 创建路由)
    - [3.4 初步创建主页和客户管理组件](#3.4 初步创建主页和客户管理组件)
    - 3.5引入路由，创建App实例
  - vue访问流程梳理：

Vue:前端知识

前瞻：

React, Angular：MVVM框架。单页应用 Single Page Application

SPA单页应用，无需直接操作dom元素

Vue 3准备工作:

1.首先安装Nodejs

傻瓜式安装，自己选好路径

2.验证安装成功

3.安装pnpm:

注意，此处选择使用pnpm包管理器进行操作，流行的nodejs包管理器很多，不一定要一样。

复制代码

npm install -g pnpm

使用pnpm --version或pnpm -v查看版本。

查看全局库路径（此处我没有更改默认路径）：

构建vue项目

在cmd命令中cd到你想新建项目的目录下输入

java 复制代码

pnpm create vite@latest demo1   //在项目创建向导中，需要手动选择使用的技术栈

选择JavaScript然后选择Vue

1. 安装Vue项目所有依赖

项目创建完成。执行此指令安装Vue项目所有依赖

复制代码

pnpm install #在项目目录下，执行此指令安装Vue项目所有依赖

###启动项目

在cmd中执行pnpm dev，启动项目，进行开发模式。

复制代码

pnpm dev  #启动服务器（开发模式）

2. 在idea中打开vue3文件

App.Vue 入口组件

main 入口js

3基础配置

3.1.在vite.config.js中配置别名，使用@代替src路径。

java 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path"

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:"localhost",
    port:5000,
    open:true
  },
  // 配置别名
  resolve:{
    alias:[
      {
        find:"@",
        replacement:resolve(__dirname,"src")
      }
    ]
  }
})

这段代码使得写src包下的components下view包里的Customer.vue的路径时，可以写

java 复制代码

"@/components/view/Customer.vue"

3.2修改index.html

为页面添加挂载点，后面的组件都会通过挂载方法插入到这里

java 复制代码

<!doctype html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxxx预约管理系统</title>
  </head>
  <body>
    <div id="app"></div><!--挂载点  -->
    <script type="module" src="/src/main.js"></script><!--进入main.js-->

  </body>
</html>

3.3 创建路由

java 复制代码

//定义路由转发器
import {createRouter,createWebHistory} from "vue-router"

//定义路由  一个地址路由到哪个组件上
const routes = [
    {
        name:"main",
        path:"/main",    //地址栏出现/main就路由到component的Main.vue组件
        component:()=>import("@/components/view/Main.vue")

    },{
        name: "Customer",
        path: "/customer",
        component:()=>import("@/components/view/Customer.vue")
    },{
        name: "index",
        path: "/",//端口号后面什么都不写
        redirect:"/main"//重定向
    }

];

//定义路由转发器
const router = createRouter({
    routes,
    history:createWebHistory()
});
export  default  router;

3.4 初步创建主页和客户管理组件

java 复制代码

<template>
  <h1>客户管理界面</h1>
</template>


<style>

</style>


<script setup>
import {onMounted} from  "vue"  //引入钩子
import axios  from "axios";
import api from "@/util/api.js";
//当组件挂载完毕之后触发
onMounted(async ()=>{
  // await阻塞等待 必须用在async函数中
  let resp = await axios( {  //await 确保了axios(）后的 console.log(resp) 只有在 API 请求完成并获得响应后才会执行，这是处理异步数据获取的标准模式。
  url:"http://localhost:8080/api/v1/members",
    method:"get",
    params:{
      page:1,
      limit:10,
    }
  });
  console.log(resp);
});

</script>

java 复制代码

<template>
  <h1>主页面</h1>
  <router-link to="/customer">去客户界面</router-link>
</template>

3.5引入路由，创建App实例

java 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入路由转发器
import router from "@/router/index.js"//index.js可以省略

const app = createApp(App);
app.use(router);

//创建一个应用
app.mount('#app')//mount挂载方法，将app里封存的东西插入到挂载点   #app对应index.html里的id=app的div标签

至此，一个简单的vue前端就搭建完成，接下来对上述提到的一些流程和概念进行详细梳理：

vue访问流程梳理：

1.用户访问配置文件中写的端口号： http://localhost:5000/，会自动加载index.html文件（这是由vue和Vite 开发服务器等决定的默认行为）

index.html程序继续运行看到 <div id="app"></div>,这一行代码是指的挂载点

辨析一下挂载和挂载点的概念

在index.html文件里<div id="app"></div> ，挂载点其实就是标记了一处地点，等待js文件里的代码调用mount挂载方法，将调用挂载方法的对象的内容插入到挂载点所在的那个标签里。

在js文件里，有类似这种代码app.mount('#app'); 其中，mount就是挂载方法。指的是，app调用mount方法，把app里的内容插入到#app所代表的这个标签里。

然后index.html程序继续向下一行代码运行，通过index.html 里的script 标签加载 /src/main.js
执行main.js。main.js执行的是导入路由器操作
首先，import router from "@/router/index.js"/导入了配置好的路由（路由怎么配置，在下一条说明），然后，const app = createApp(App);创建了一个App.vue的实例，其实相当于一个容器，或者说控制器，
下一行app.use(router);就是将引入的路由router装入了app里，紧接着，app.mount('#app')就对应上一条的mount挂载方法，这条语句执行完之后，就会把app里的内容，插入到挂载点标注的地方。
定义路由，在src下定义了一个包叫router就是路由的意思，下面建立了一个js文件，叫index.js，注意，名字叫index.js只是这样写，不代表他和上面的index.html是对应的，这里面只用于定义路由和转发。在index.js里：
先定义了一个路由，也就是在访问哪些路径时，会跳转到哪些vue界面

java 复制代码

const routes = [
    {
        name:"main",
        path:"/main",    //地址栏出现/main就路由到component的Main.vue组件
        component:()=>import("@/components/view/Main.vue")

    },{
        name: "Customer",
        path: "/customer",
        component:()=>import("@/components/view/Customer.vue")
    },{
        name: "index",
        path: "/",//端口号后面什么都不写
        redirect:"/main"//重定向
    }

];

然后定义路由转发器：把路由信息封装到路由转发器里

java 复制代码

//定义路由转发器
const router = createRouter({
    routes,
    history:createWebHistory()
});
export  default  router;

APP.Vue是总组件，或者说是跟组件，里面写的 <router-view></router-view>，在路由转发所调用的组件，比如Main.vue被调用，就是被插入到 <router-view></router-view>这，然后显示出来的。