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 算法(FragmentTeleport),提高了渲染性能。
    • 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 的新特性和性能提升通常能够带来更好的开发体验和更高的性能。

参考资料