【软件安装与配置】 vue

1. 安装 Node.js

Vue.js 项目通常依赖于 Node.js 环境来进行开发，可以从 Node.js 官方网站下载并安装稳定版本。安装 Node.js 后，npm（Node 包管理器）也会自动安装。

2. 使用 Vue CLI 安装 Vue.js

Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工具。安装 Vue CLI 并初始化项目的步骤如下：

(1) 安装 Vue CLI

打开终端/命令行，运行以下命令全局安装 Vue CLI：

npm install -g @vue/cli

安装成功后，可以通过运行 vue --version 来检查是否安装成功。

(2) 创建一个新的 Vue 项目

执行以下命令来创建一个 Vue 项目：

vue create my-vue-project

会出现一些选项，例如选择默认的 Vue 2 或 Vue 3，或者手动选择一些额外的特性（如 Babel、TypeScript、Router、Vuex 等），选择需要的配置即可。
在这里插入图片描述

(3) 进入项目目录并启动项目

cd my-vue-project
npm run serve

默认情况下，项目会在 http://localhost:8080/ 上运行。

在这里插入图片描述

3. 使用 Vite 安装 Vue.js

Vite 是一种现代的前端构建工具，速度非常快，适合 Vue 项目。使用 Vite 安装 Vue.js 更加简洁。

(1) 安装 Vite

可以通过以下命令创建一个使用 Vite 的 Vue 项目：

npm create vite@latest my-vue-project

根据提示选择框架类型，选择 Vue，如果你想使用 Vue 3，还可以选择 Vue + TypeScript。

在这里插入图片描述

(2) 进入项目目录并安装依赖

cd my-vue-project
npm install

(3) 启动项目

npm run dev

在这里插入图片描述

项目将启动并显示访问地址，默认会在 http://localhost:5173/ 上运行。

4. 项目结构

无论使用 Vue CLI 还是 Vite，生成的项目通常包含以下目录结构：

my-vue-project
├── node_modules        // 项目依赖的模块
├── public              // 公共文件夹
├── src                 // 源代码目录
│   ├── assets          // 静态资源文件
│   ├── components      // Vue 组件
│   └── App.vue         // 根组件
├── .gitignore          // Git忽略文件
├── package.json        // 项目依赖及配置信息
└── vite.config.js      // Vite 配置文件 (若使用 Vue CLI，则是 vue.config.js)

5. 基本配置

在开发 Vue.js 项目时，可以通过 vue.config.js (Vue CLI) 或 vite.config.js (Vite) 来进行项目的构建配置。常见配置包括：

代理设置： 用于处理开发环境中的跨域请求。
环境变量： 在 .env 文件中定义不同环境下的变量，如 API URL。

例如在 Vite 中设置代理：

// vite.config.js
export default {server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
}