前端工程初始化
搭建前端环境是第一步。我们需要确保本地已安装 Node.js 运行环境、npm 包管理工具，以及基于 Vue 的 CLI 脚手架。
创建项目
使用 Vue CLI 可以快速交互式地生成项目结构。可以通过命令行执行 vue create 项目名称，或者直接使用 vue ui 图形化界面操作。两种方式本质相同，选择你更习惯的一种即可。
目录结构解析
项目启动后，VS Code 打开根目录，主要文件说明如下：
- node_modules：存放所有依赖的 JS 包。
- assets：静态资源目录。
- components：公共组件存放处。
- App.vue：主组件，页面入口。
- main.js：整个项目的入口文件。
- package.json：配置信息与依赖管理。
- vue.config.js：Vue CLI 配置文件，可在此调整端口等参数。
启动服务后访问 localhost，若端口冲突，可在 vue.config.js 中修改 devServer.port 指定其他端口（如 7070）。
Vue 核心语法
组件基础
Vue 组件以 .vue 结尾，包含三部分：<template> 结构、<style> 样式、<script> 逻辑。
常用指令
- 文本插值：使用
{{ }}绑定 data 属性，支持三元表达式。 - 属性绑定：通过
v-bind:xxx或简写:xxx将标签属性与数据绑定。 - 事件绑定：使用
v-on:xxx或@xxx监听用户交互，在 methods 中定义处理函数。 - 双向绑定：表单输入项使用
v-model，实现视图与数据的实时同步。 - 条件渲染：利用
v-if、v-else根据状态动态显示元素。
网络请求 Axios
Axios 是基于 Promise 的 HTTP 库。安装后导入使用，注意处理跨域问题。在 vue.config.js 配置代理可将 /api 请求转发至后端地址，避免 CORS 错误。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 7070,
: {
: {
: ,
: { : }
}
}
}
})
