Vue复习
文章目录
- Vue:前端知识
- Vue 3准备工作:
- 1.首先安装Nodejs
- 2.验证安装成功
- 3.安装pnpm:
- 构建vue项目
- 1. 安装Vue项目所有依赖
- 2. 在idea中打开vue3文件
- 3在vite.config.js中配置别名，使用@代替src路径。
- vue访问流程梳理：
Vue:前端知识
前瞻：
React, Angular：MVVM框架。单页应用 Single Page Application
SPA单页应用，无需直接操作dom元素
Vue 3准备工作:
1.首先安装Nodejs
傻瓜式安装，自己选好路径
2.验证安装成功
3.安装pnpm:
npm install -g pnpm
使用pnpm --version或pnpm -v查看版本。
全局库路径：
构建vue项目
pnpm create vite@latest demo1 //在项目创建向导中，需要手动选择使用的技术栈
1. 安装Vue项目所有依赖
项目创建完成。执行此指令安装Vue项目所有依赖
pnpm install #在项目目录下，执行此指令安装Vue项目所有依赖
###启动项目
在cmd中执行pnpm dev，启动项目，进行开发模式。
pnpm dev #启动服务器（开发模式）
2. 在idea中打开vue3文件
App.Vue 入口组件
main 入口js
3在vite.config.js中配置别名，使用@代替src路径。
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的路径时，可以写
"@/components/view/Customer.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界面
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;
- APP.Vue是总组件，或者说是跟组件，里面写的
<router-view></router-view>，在路由转发所调用的组件，比如Main.vue被调用，就是被插入到<router-view></router-view>这，然后显示出来的。