Vue安装

发表于 分类于

Vue简介

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue安装

npm安装

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

1
2
npm create vue@latest

执行命令后即可安装，安装过程中会提示你是否需要安装一些项目脚手架工具，如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
sutune@sutunedeMac-mini ~ % npm create vue@latest
Need to install the following packages:
  create-vue@3.7.5
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/sutune/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

sutune@sutunedeMac-mini ~ %

CDN安装

可以以借助script标签直接通过 CDN 来使用 Vue：

1
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

启动Vue

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

1
2
3
cd vue-project  #如果修改了项目名称请换成修改后的项目名称
npm install
npm run dev

执行完成命令后，打开浏览器输入地址http://localhost:5173/ 可以看到Vue的引导页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sutune@sutunedeMac-mini ~ % cd vue-project
sutune@sutunedeMac-mini vue-project % npm install 

added 89 packages, and audited 90 packages in 19s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
sutune@sutunedeMac-mini vue-project % npm run dev

> vue-project@0.0.0 dev
> vite


  VITE v4.4.11  ready in 554 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help


vue-index

打包

当你准备将应用发布到生产环境时，请运行：

1
npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

Vue创建项目

要创建一个 Vue 项目，你可以使用 Vue CLI（Vue Command Line Interface），这是一个官方提供的工具，用于初始化和管理 Vue.js 项目。以下是创建 Vue 项目的一般步骤：

1. 安装 Vue CLI（如果未安装）：

首先，确保你的计算机上已经安装了 Node.js 和 npm（Node.js 包管理工具）。然后，可以使用 npm 全局安装 Vue CLI：

1
npm install -g @vue/cli

这将安装最新版本的 Vue CLI。

2. 创建新的 Vue 项目：

使用 Vue CLI 创建一个新的 Vue 项目，可以运行以下命令：

1
vue create my-vue-project

这里的 my-vue-project 是你项目的名称，你可以自行替换为其他名称。执行此命令后，Vue CLI 将提示你选择一些配置选项，如 Babel、ESLint 等。你可以根据项目需求进行选择，或者使用默认配置。

3. 进入项目目录：

创建完成后，进入新创建的项目目录：

1
cd my-vue-project

4. 运行项目：

在项目目录中，你可以运行以下命令来启动开发服务器：

1
npm run serve

这将启动开发服务器并在默认端口（通常是 http://localhost:8080）上运行你的 Vue 项目。你可以通过浏览器访问该地址来查看项目。

vue-welcome

5. 开发项目：

现在，你可以在项目目录中的 src/ 目录中编写 Vue 组件、样式和其他代码，以开发你的应用程序。在开发过程中，你可以通过编辑文件并查看浏览器中的实时更新来进行测试。

6. 构建项目：

当你准备好发布项目时，可以运行以下命令以构建项目文件：

1
npm run build

这将在项目目录中创建一个 dist/ 目录，其中包含用于生产部署的最终文件。

Vue文件目录结构

Vue 3 的项目通常遵循一种标准的目录结构，但请注意，目录结构可以根据项目的需求和个人偏好进行调整。以下是一个标准的 Vue 3 项目目录结构示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
my-vue3-project/
│
├── public/
│   ├── index.html      # 入口 HTML 文件
│   ├── favicon.ico     # 网站图标
│   └── ...             # 其他静态资源
│
├── src/
│   ├── assets/         # 静态资源文件，如图片、样式
│   ├── components/     # Vue 组件
│   ├── views/          # 页面级别的组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 应用的入口文件
│   └── router.js       # 路由配置文件
│
├── node_modules/       # 项目依赖的 Node.js 模块
│
├── package.json        # 项目配置文件，包括依赖和脚本
│
├── babel.config.js     # Babel 配置文件
│
├── webpack.config.js   # Webpack 配置文件
│
├── README.md           # 项目说明文档
│
└── ...                 # 其他配置文件和工具

这是一个通用的目录结构示例，其中包含了主要的目录和文件，以下是一些说明：

  • public/：用于存放不需要经过构建处理的静态资源，如 HTML 文件、图标等。

  • src/：包含项目的源代码。其中：

    • assets/ 存放静态资源文件，如图片、样式表。
    • components/ 存放可复用的 Vue 组件。
    • views/ 存放页面级别的组件，通常与路由相关。
    • App.vue 是根组件，包含应用的整体结构。
    • main.js 是应用的入口文件，用于创建 Vue 实例并挂载到 DOM 上。
    • router.js 可选，包含路由的配置信息。

  • node_modules/：存放项目依赖的 Node.js 模块，通常由 npm 或 Yarn 安装。

  • package.json：项目的配置文件，包含项目的依赖、脚本等信息。

  • babel.config.js：Babel 配置文件，用于转译 JavaScript 代码。

  • webpack.config.js：Webpack 配置文件，用于构建和打包应用。

  • README.md：项目的说明文档，包括项目的简介、使用方法等。

Vue3与Vue2的区别

Vue 3 和 Vue 2 之间有许多重要的区别，主要包括以下方面：

  1. Composition API（组合式 API）：

    • Vue 2 主要使用选项式 API，而 Vue 3 引入了 Composition API，它允许将组件的逻辑更灵活地组织，将相关的代码放在一起，提高了代码的可维护性。

  2. 性能优化：

    • Vue 3 在内部进行了许多性能优化，包括更高效的虚拟 DOM 算法（Fragment 和 Teleport），提高了渲染性能。
    • Vue 3 的 Tree-shaking 支持更好，可以减小打包文件的大小。
    • 静态节点提升（Static Node Hoisting）可以减少渲染时的开销。

  3. Composition API 与 Options API：

    • Vue 2 使用 Options API，而 Vue 3 引入了 Composition API，它允许更好地组织和重用组件逻辑。
    • Composition API 提供了 setup 函数，允许在一个地方组织组件的数据、计算属性、方法等。

  4. Teleport 和 Suspense：

    • Vue 3 引入了 Teleport 组件，用于更灵活地控制组件的渲染位置。
    • Vue 3 也引入了 Suspense 组件，用于处理异步操作和代码分割。

  5. TypeScript 支持：

    • Vue 3 对 TypeScript 提供了更好的支持，包括原生的类型声明。

  6. 全局 API 的更改：

    • Vue 3 中一些全局 API 的名称和用法发生了变化，需要注意迁移。

  7. 更小的体积：

    • Vue 3 的运行时包更小，可以减少应用的体积。

  8. Custom Renderer API：

    • Vue 3 引入了 Custom Renderer API，允许创建自定义渲染器，以便在不同平台上运行，如移动端、桌面端等。

  9. Vue Router 和 Vuex 的更新：

    • Vue Router 和 Vuex 也进行了更新，以适应 Vue 3。

需要注意的是，虽然 Vue 3 引入了许多新特性和性能优化，但也可能需要一些学习和迁移成本，特别是对于那些熟悉 Vue 2 的开发者来说。然而，Vue 3 的新特性和性能提升通常能够带来更好的开发体验和更高的性能。

参考资料