Vue驾校-从项目学Vue-1

前言：

全部Vue框架内容：Vue驾校-从项目学Vue-2
算法系列博客友链：神机百炼
强烈推荐Y总所有课程：小白友好的程序教学社区

框架安装

安装Node.js：

• 调试过程在Node.js环境进行
• 下载地址：可能非常慢，服务器在国外
  

安装@vue/cli

• 安装vue的开发环境

1. win10自带的搜索框，搜索打开PowerShell
   
2. 将下载源替换为国内阿里版

npm config set registry https://registry.npm.taobao.org 

3. 查看是否替换成功：

npm config get registry 

• 成功则显示：
  

4. 开始安装开发环境

npm i -g @vue/cli

5. 启动Vue图形化管理界面

• vue提供图形化管理方式，运行如下指令启动图形化管理：（也有命令行的管理方式）

vue ui

• 启动后默认浏览器自动打开Vue图形化管理界面
• 不要关闭PowerShell，否则与Vue图形化管理界面断开连接
  

6. 打开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组件举例：

  1. 该vue组件含有name，但是HelloWorld.vue和About.vue和App.vue无，且导入HelloWorld.vue时以import从路径导入
     2.components导入的组件在<\temlplate>中以标签使用
     

• 每个.vue组件由3部分组成（不是必须）：

  1. html部分
  2. javaScript部分
  3. 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')

• 调用文件关系图：
  
• 初步结论：

1. vue组件相当于html文件中的一个标签，且是组件主动去通过css的id选择器关联html标签
2. router下的index.js中写着所有的vue组件和网页路由对应关系
3. main.js将vue组件和html标签，router路由，vuex，相互关联
4. vuex的宏观作用是多组件之间共享同一个数据，但是在初始设置中该作用未体现，需要后续学习

博客架构：

页面设计：

• 页面中所有部分，都可以抽象集成为各个vue组件
  

设计方法：

• 自顶向下，从功能出发设计页面
• 页面模块组件化，对于复杂功能的组件，继续将其细分组件化