当前位置：首页 > article >正文

【软件安装与配置】 vue

article 2024/10/23 0:29:06

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/, '')
      }
    }
  }
}