Vue驾校-从项目学Vue-1
前言:
全部Vue框架内容:
Vue驾校-从项目学Vue-2
算法系列博客友链:
神机百炼
强烈推荐Y总所有课程:
小白友好的程序教学社区
本Vue系列博客为
Acwing:Web应用课Y总课堂笔记
框架安装
安装Node.js:
- 调试过程在Node.js环境进行
- 下载地址:可能非常慢,服务器在国外
安装@vue/cli
- 安装vue的开发环境
- win10自带的搜索框,搜索打开PowerShell
- 将下载源替换为国内阿里版
npm config set registry https://registry.npm.taobao.org
- 查看是否替换成功:
npm config get registry
- 成功则显示:
- 开始安装开发环境
npm i -g @vue/cli
- 启动Vue图形化管理界面
- vue提供图形化管理方式,运行如下指令启动图形化管理:(也有命令行的管理方式)
vue ui
- 启动后默认浏览器自动打开Vue图形化管理界面
- 不要关闭PowerShell,否则与Vue图形化管理界面断开连接
- 打开Vue项目管理器
- 第一次打开,Vue项目管理器在左下角…,点击打开:
- 创建过项目后,Vue项目管理器在左上角点击打开:
架构模式
前后端分离:(Vue)
-
工作流程:
客户端访问url
服务器先传递给客户端页面基本样式的一个html文件和相关的 css javaScript文件,但是部分数据未发送过来
客户端浏览到某一项数据,再向服务器提交请求,服务器返回该项的数据,客户端再将数据装载到页面该项中
-
特点:
前端一次性从后端接受所有网页文件(一个网页的html文件 & 可以通过运行产生其他网页的js文件,这个就是前端渲染)
后端不负责渲染html文件,仅返回前端要求的数据
前后端不分离:(Thymeleaf)
-
工作流程:
客户端访问url
服务器将整个页面的基本样式 + 每一项中数据填充好,完整返回一个html文件和相关的 css javaScript 文件
客户端只发送一次请求,不用再发送请求
-
特点:
后端既负责装载数据,又负责渲染界面
前端所有内容都是由后端控制的,前后端耦合度很高
前后端分离的好处:
- 一套后端数据,多套前端界面
- 常见的前端界面:pc的网页,手机移动端的网页,app,小程序
项目准备:
创建新项目
1. 选择存储位置:
- 双击选择框开始编辑,复制粘贴本地路径,回车确定
2. 项目名 + 包管理器
- 项目基本设置如下,项目名即新创建的文件夹名
3. 预设所需插件和配置
- 由于创建的项目都有100MB+,所以创建过程很耗时
- 创建成功后,会发出windows弹窗提醒
同时在本地路径中可以看到新创建的项目
网页端也变为了《项目仪表盘》- dashboard
4.自配所需插件和库
- 所需插件:
router:多网页中各自网页的路由
vuex:多组件之间共享同一个数据
-所需依赖/库:
依赖搜索入口:不是搜索框而是旁边的+安装依赖
安装bootstrap:程序员的美工工具
5. 任务功能介绍:
- 所有的任务功能:
- 运行Serve:
开始运行:
查看输出:输出了两个网址,一个本地&一个公网
查看链接:能看到下列页面说明项目运行成功
查看项目文件:
1. 编辑工具:
- vscode:下载地址 - 国内镜像
下载完成之后,装配官方简体中文插件
打开刚才创建的项目文件夹:
- Vue插件:安装Vue插件
2. 文件目录含义:
-
初始文件目录:
-
初始前端文件:
初始时,views中含有两个.vue组件:AboutView.vue & HomeView.vue
router的index.js中记录两个网页路由:
对应着开始时的两个网页(Home,About)及其路由:
3. .vue组件:
- 定义:在Html中自带将一个网页嵌入另一个网页的框架功能标签
<iframe src="链接" wideth="数值" height="数值"> </ifame>
Vue中的组件就是实现类似的小网页,封装可重复利用的界面,在使用时直接import导入即可
-
最终.vue组件都导出成为一个个对象,该对象含有两个属性:
拿HomeView.vue组件举例:
- 该vue组件含有name,但是HelloWorld.vue和About.vue和App.vue无,且导入HelloWorld.vue时以import从路径导入
2.components导入的组件在<\temlplate>中以标签使用
- 该vue组件含有name,但是HelloWorld.vue和About.vue和App.vue无,且导入HelloWorld.vue时以import从路径导入
-
每个.vue组件由3部分组成(不是必须):
- html部分
- javaScript部分
- css部分
-
创建vue组件
-
导入vue组件:
3. 组件内css选择器:
- 区别于传统style标签,Vue的css可以添加scoped属性
用于将css选择器范围限制在该vue组件中,而不去对vue所属的html中其余标签进行选择
4. main.js作用:
- main.js是项目的入口,其核心语句:
createApp(Vue组件名).use(Vuex下的store文件夹).use(Vue-router下的router文件夹).mount('public文件夹下的html文件中#标签id')
- 调用文件关系图:
- 初步结论:
- vue组件相当于html文件中的一个标签,且是组件主动去通过css的id选择器关联html标签
- router下的index.js中写着所有的vue组件和网页路由对应关系
- main.js将vue组件和html标签,router路由,vuex,相互关联
- vuex的宏观作用是多组件之间共享同一个数据,但是在初始设置中该作用未体现,需要后续学习
博客架构:
页面设计:
- 页面中所有部分,都可以抽象集成为各个vue组件
设计方法:
- 自顶向下,从功能出发设计页面
- 页面模块组件化,对于复杂功能的组件,继续将其细分组件化