Vue单页应用 | 青训营

peaky
100 阅读3分钟

一、概念辨析

  1. SPA（Single-Page Application）：单页面应用
    • 使用场景：现代网站
    • 特点：
      • 只有第一次访问时才需要完整请求一次页面，之后都是在更新指定位置
        • 结果：切换页面速度快，用户体验好
      • 不利于SEO，因为全程由JS控制渲染，唯一的一个HTML页面通常为空页面
  2. MPA（Multi-Page Application）：多页面应用
    • 使用场景：传统网站
    • 特点：

      • 每访问一个页面都要经历一次完整的页面请求过程，这样每次都需要完整渲染一遍

        • 结果：如果资源较多，用户会感到明显的卡顿

      • 容易被搜索引擎收录，因为网页内容直接位于HTML内

二、创建Vue单页应用（SPA）

  1. 安装Node.js（官网下载），node -v检查版本（只需安装一次）
  2. 在选定目录下安装create-vue（Vue官方的项目脚手架工具），并选择需要的功能
    • npm create vue@latest
  3. 安装依赖
    • npm install
  4. 启动开发服务器
    • npm run dev
      • 'dev'为package.json文件'script'配置项里的key
  5. 如果要发布应用到生产环境
    • npm run build

我的创建：

image.png image.png image.png

三、项目流程

  1. 创建根组件的应用实例，并将其挂载在真实DOM上

    • 原因：

      • 应用实例必须挂载后才能渲染在页面上

    • 实现：

      • 导入createApp和根组件
        • import {createApp} from 'vue'
        • import App from './App.vue'
      • 挂载
        • 应用实例名.mount('#实际DOM元素的ID属性值）

    • 关于根组件：

      • 作用
        • 作为应用最顶层组件，负责管理其他所有组件（都是它的子组件）

    • 关于应用实例：

      • 作用
        • 作为整个Vue应用的入口点，负责管理和协调所有的组件、数据和状态
        • 在MVVM模型里，扮演ViewModel的角色，负责连接视图（View）与数据模型（Model）

    • 关于真实DOM：

      • 一个HTML元素/容器

    • 我的创建： image.png

  2. 创建组件

    • 组件文件组成
      • template（类html）
      • script（类js）
      • style（类css）
    • 相关操作
      • 快捷创建模板
        • 安装vetur插件，创建模板时输入<v后按下enter/tab
          image.png
      • 组件里嵌套另一个组件【该组件为此组件的子组件】
        • 两种实现方式
          • 当前组件注册使用（只能在当前组件里用）
            • 导入
              • import 组件名 from '组件路径'
            • 注册
              • components:{组件名}
            • 使用
              • <组件名/>
                • 组件名有两种规范命名
                  • 一种用大驼峰（全部单词为大写字母开头），如：MyItem
                  • 一种用全小写和‘-’连接，如：my-item
          • 全局注册（所有组件都可用）
            • 应用实例对象.component（'注册的名字'，{//组件的实现})
            • 或者：应用实例对象.component（'注册的名字'，组件选项对象）
      • 组件内通信
        • 父子组件
        • 兄弟组件
        • 全局组件

  3. 配置路由

    • 作用
      • 让路由在合适位置渲染组件
    • 实现
      • 安装
        • 项目创建时选择引入
        • 或：npm install vue-router@4(vue router4.x版本)
      • 定义好路由组件
      • 定义路由配置对象
        • [{path:'',component:路由组件名},{}...]
      • 创建路由实例并传入路由配置对象
        • 使用createRouter()
      • 确保整个应用支持路由
        • 应用实例名.use(路由实例对象名)
          • 结果：
            • 会触发第一次导航
            • 可在任意组件中以 this.$router 的形式访问它
            • 能以 this.$route 的形式访问当前路由

  4. 定义

    • 数据：使用ref/reactive创建响应式对象
    • 事件：使用function

  5. 打包部署到服务器上，供用户访问

avatar
文章
阅读
粉丝