Vue安装
Vue简介
Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
- Vue官网:https://cn.vuejs.org/
Vue安装
npm安装
确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令
1 | npm create vue@latest |
执行命令后即可安装,安装过程中会提示你是否需要安装一些项目脚手架工具,如果不确定是否要开启某个功能,你可以直接按下回车键选择 No
。
1 | sutune@sutunedeMac-mini ~ % npm create vue@latest |
CDN安装
可以以借助script
标签直接通过 CDN 来使用 Vue:
1 | <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> |
通过 CDN 使用 Vue 时,不涉及“构建步骤”。这使得设置更加简单,并且可以用于增强静态的 HTML 或与后端框架集成。但是,你将无法使用单文件组件 (SFC) 语法。
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
- Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
- unpkg:https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
启动Vue
在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
1 | cd vue-project #如果修改了项目名称请换成修改后的项目名称 |
执行完成命令后,打开浏览器输入地址http://localhost:5173/
可以看到Vue的引导页面。
1 | sutune@sutunedeMac-mini ~ % cd vue-project |
打包
当你准备将应用发布到生产环境时,请运行:
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 项目。你可以通过浏览器访问该地址来查看项目。
5. 开发项目:
现在,你可以在项目目录中的 src/
目录中编写 Vue 组件、样式和其他代码,以开发你的应用程序。在开发过程中,你可以通过编辑文件并查看浏览器中的实时更新来进行测试。
6. 构建项目:
当你准备好发布项目时,可以运行以下命令以构建项目文件:
1 | npm run build |
这将在项目目录中创建一个 dist/
目录,其中包含用于生产部署的最终文件。
Vue文件目录结构
Vue 3 的项目通常遵循一种标准的目录结构,但请注意,目录结构可以根据项目的需求和个人偏好进行调整。以下是一个标准的 Vue 3 项目目录结构示例:
1 | my-vue3-project/ |
这是一个通用的目录结构示例,其中包含了主要的目录和文件,以下是一些说明:
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 之间有许多重要的区别,主要包括以下方面:
Composition API(组合式 API):
- Vue 2 主要使用选项式 API,而 Vue 3 引入了 Composition API,它允许将组件的逻辑更灵活地组织,将相关的代码放在一起,提高了代码的可维护性。
性能优化:
- Vue 3 在内部进行了许多性能优化,包括更高效的虚拟 DOM 算法(
Fragment
和Teleport
),提高了渲染性能。 - Vue 3 的 Tree-shaking 支持更好,可以减小打包文件的大小。
- 静态节点提升(Static Node Hoisting)可以减少渲染时的开销。
- Vue 3 在内部进行了许多性能优化,包括更高效的虚拟 DOM 算法(
Composition API 与 Options API:
- Vue 2 使用 Options API,而 Vue 3 引入了 Composition API,它允许更好地组织和重用组件逻辑。
- Composition API 提供了
setup
函数,允许在一个地方组织组件的数据、计算属性、方法等。
Teleport 和 Suspense:
- Vue 3 引入了
Teleport
组件,用于更灵活地控制组件的渲染位置。 - Vue 3 也引入了
Suspense
组件,用于处理异步操作和代码分割。
- Vue 3 引入了
TypeScript 支持:
- Vue 3 对 TypeScript 提供了更好的支持,包括原生的类型声明。
全局 API 的更改:
- Vue 3 中一些全局 API 的名称和用法发生了变化,需要注意迁移。
更小的体积:
- Vue 3 的运行时包更小,可以减少应用的体积。
Custom Renderer API:
- Vue 3 引入了 Custom Renderer API,允许创建自定义渲染器,以便在不同平台上运行,如移动端、桌面端等。
Vue Router 和 Vuex 的更新:
- Vue Router 和 Vuex 也进行了更新,以适应 Vue 3。
需要注意的是,虽然 Vue 3 引入了许多新特性和性能优化,但也可能需要一些学习和迁移成本,特别是对于那些熟悉 Vue 2 的开发者来说。然而,Vue 3 的新特性和性能提升通常能够带来更好的开发体验和更高的性能。