vue基础回顾+进阶

课程内容

  • VUE 基础回顾
  • 路由 Vue-Router
  • 状态管理 vuex
  • TypeScript

1. VUE 基础回顾

1.1 基于脚手架创建前端工程

1.1.1 环境要求

要想基于脚手架创建前端工程，需要具备如下环境要求：

  • node.js 前端项目的运行环境
  • npm JavaScript的包管理工具
  • Vue CLI 基于Vue进行快速开发的完整系统，实现交互式的项目脚手架

安装完node.js后，可以通过命令行来查看版本号，如下：

image-20230925094426687

安装 Vue CLI，命令如下：

image-20230925094630147

1.1.2 操作过程

使用 Vue CLI 创建前端工程的方式：

  • 方式一：vue create 项目名称
  • 方式二：vue ui

重点介绍使用 vue ui 命令创建前端工程的过程：

第一步：在命令行输入命令 vue ui,在浏览器ui界面中选择前端工程存放的位置

image-20230925100950987

第二步：点击“在此创建新项目”按钮，跳转到创建新项目设置页面

image-20230925101106692

第三步：填写项目名称、选择包管理器为npm，点击“下一步”按钮

image-20230925101202363

第四步：选择 Default(Vue 2)，点击"创建项目"按钮，完成项目的创建

image-20230925101317873

1.1.3 工程结构

工程目录结构：

image-20230925103418213

重点文件或目录介绍：

  • node\_modules：当前项目依赖的js包
  • assets：静态资源存放目录
  • components：公共组件存放目录
  • App.vue：项目的主组件，页面的入口文件
  • main.js：整个项目的入口文件
  • package.json：项目的配置信息、依赖包管理
  • vue.config.js：vue-cli配置文件

1.1.4 启动前端服务

使用VS Code打开创建的前端工程，启动前端工程：

image-20230925103813210

访问前端工程：

image-20230925103913672

注：要停止前端服务，可以在命令行终端使用 ctrl + C

前端项目启动后，服务端口默认为8080，很容易和后端tomcat端口号冲突。如何修改前端服务的端口号？

可以在vue.config.js中配置前端服务端口号：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070  //指定前端服务端口号
  }
})

1.2 vue基本使用方式

本章节从如下几个方面进行vue回顾：

  • vue 组件
  • 文本插值
  • 属性绑定
  • 事件绑定
  • 双向绑定
  • 条件渲染
  • axios

1.2.1 vue 组件

Vue 的组件文件以 .vue 结尾，每个组件由三部分组成：

  • 结构