前端vue的开发流程

BS架构的优点总结如下：

1）跨平台性 ：BS架构基于Web技术，可以在不同操作系统和设备上运行，满足用户跨平台使用的需求。

2）易于维护 ：BS架构的客户端是浏览器，无需在客户端安装和维护应用程序，降低了维护成本和维护工作量。

3）分布式能力强 ：BS架构可以轻松实现分布式应用，提高系统的可用性和可扩展性。

4）开发成本较低 ：BS架构不需要开发客户端软件，只需要开发服务端业务，任务轻量级。

5）用户便利性：用户在使用时不需要下载，上网搜索相关网址即可访问。

一、前端Vue环境配置

1.安装 Node.js 与 NPM

1.1下载与安装

1）访问 Node.js 官网 (https://nodejs.org/) ，下载 **LTS（长期支持版）**安装包，如下图所示。

2）运行安装程序，基本按照默认选项安装即可。安装过程会自动包含 npm（Node Package Manager）

1.2安装验证

打开命令提示符（CMD）或 PowerShell。输入以下命令来检查安装是否成功，如果能显示版本号，说明安装正确。

2.安装 Vue CLI

Vue CLI 是官方提供的项目脚手架工具，可以帮你快速创建Vue项目结构。

2.1 在命令行中执行以下命令进行全局安装

复制代码

npm install -g @vue/cli

安装完成后，可以通过以下命令验证安装

复制代码

vue --version

注意：是以管理员身份运行的cmd指令。

3、创建并运行Vue项目

3.1创建新项目

在自己选择的目录下，使用以下命令创建项目 my_vue_project不能用MyVueProject 进行命名，否则报错（提示项目名称无效）

复制代码

vue create my_vue_project

执行命令后，CLI会提示你进行项目配置。可选择 Default 预设即可。

执行后界面如下

3.2启动开发服务器

1）项目创建成功后，进入项目目录：

复制代码

cd my-vue-project

2）运行以下命令来启动开发服务器

复制代码

npm run serve

命令执行完成后，命令行中通常会显示一个本地地址（例如 http://localhost:8080）。在浏览器中打开这个地址，你就能看到崭新的Vue应用运行起来了。

二、 Windows环境下VS Code的安装及配置

1.下载及安装

Visual Studio Code（简称 VS Code）是一款轻量级但功能强大的源代码编辑器，支持多种编程语言，凭借其丰富的插件生态和强大的调试功能，深受开发者喜爱。下面详细介绍如何在 Windows 系统上安装和初步配置 VS Code。

访问 VS Code 官网 https://code.visualstudio.com/Download。页面通常会根据你的操作系统自动推荐版本（如 Windows 用户会看到 "Download for Windows"）。直接点击此按钮即可下载安装程序。对于 Windows 系统，推荐下载 User Installer（用户安装版），因为它不需要管理员权限，更新也更便捷。

运行安装。

2.VSCode配置

安装完成后启动 VS Code，接下来进行一些基础配置能让你的开发效率倍增。

2.1安装中文包

VS Code 界面默认是英文。可以按 Ctrl+Shift+X 打开扩展面板，搜索 Chinese (Simplified) Language Pack 并安装，然后重启编辑器，界面就会切换为简体中文。框选的部分为扩展工具栏，如下图所示。

2.2推荐安装的实用插件如下

VS Code 的强大之处在于其丰富的插件生态系统。对于前端开发者，以下几款插件非常实用：
Chinese (Simplified) Language Pack 提供中文界面支持
Prettier - Code formatter 自动格式化代码，统一风格
ESLint 识别和报告代码中的模式，保证质量与统一风格
Vue - Official (Volar) 为 Vue.js 项目提供强大的语言支持
Live Server 启动一个本地开发服务器，并提供实时重载功能

2.3基础配置（修改 settings.json）

按 Ctrl+, 打开设置，点击右上角的"打开设置(JSON)"图标，可以粘贴以下推荐配置来优化你的编辑器。

javascript 复制代码

{
  // 编辑器基础设置
  "editor.fontSize": 16,
  "editor.tabSize": 2, // 设置制表符宽度为2空格，前端开发常用
  "editor.formatOnSave": true, // 保存时自动格式化代码，强烈推荐开启
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置Prettier为默认格式化工具

  // 文件关联
  "files.associations": {
    "*.vue": "vue" // 让VS Code更好地识别.vue文件
  }
}

2.4 java和javascript的区别与联系

Java 和 JavaScript 虽然在名字上相似，但它们本质上是两种截然不同的编程语言。可以把它们的关系理解为"汽车"和"汽车模型"------名字里都有"汽车"，但本质、用途和规模完全不同。

Java ：是一种编译型 语言。你写的 .java 源代码需要先通过编译器（javac）转换成与平台无关的 .class 字节码文件 。然后，这个字节码文件在 Java 虚拟机（JVM） 上运行。JVM 充当了一个翻译官的角色，使得 Java 实现了"一次编写，到处运行"。
JavaScript ：是一种解释型 语言。你写的 .js 源代码是纯文本，不需要预先编译。它由嵌入在浏览器（如 Chrome 的 V8 引擎）或Node.js 环境中的 JavaScript 引擎 直接读取并执行。

javascript 复制代码

let value = 10;     // 现在是一个数字
value = "hello";    // 现在是一个字符串，完全合法
value = true;       // 现在是一个布尔值，也合法

JavaScript 像一个多才多艺的演员，无需排练（编译），可以在舞台（浏览器）上即兴表演（动态交互），也能在后台（Node.js）独当一面。