1、使用 CDN 安装
最简单的方法是直接在 HTML 文件中引用 Vue.js 的 CDN 链接。适用于快速开发或演示。
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <!-- Vue 2 -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --> <!-- Vue 3 -->
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
2、使用 npm 或 yarn 安装
npm 和 yarn 是常用的包管理工具，适用于大多数开发项目。
1）安装 Vue 2
# 使用 npm 安装 Vue 2 npm install vue@2 # 使用 yarn 安装 Vue 2 yarn add vue@2
2）安装 Vue 3
# 使用 npm 安装 Vue 3 npm install vue@next # 使用 yarn 安装 Vue 3 yarn add vue@next
3）在项目中使用
创建一个简单的 Vue 项目结构：
my-vue-app/ ├── index.html ├── package.json ├── src/ │ └── main.js └── node_modules/
在 index.html 文件中：
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script src="dist/main.js"></script>
</body>
</html>在 src/main.js 文件中：
// Vue 2
import Vue from 'vue';
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
// Vue 3
// import { createApp } from 'vue';
// const app = createApp({
// data() {
// return {
// message: 'Hello Vue!'
// }
// }
// });
// app.mount('#app');
4）构建项目
# 使用 npm 构建项目 npm run build # 使用 yarn 构建项目 yarn build
3、使用 Vue CLI
Vue CLI 是一个官方的脚手架工具，适用于创建复杂的 Vue.js 应用程序。
1）安装 Vue CLI
# 全局安装 Vue CLI npm install -g @vue/cli # 或者使用 yarn yarn global add @vue/cli
2）创建一个新项目
vue create my-vue-app
按照提示选择配置，完成后 Vue CLI 会创建一个新的 Vue 项目。
3）运行开发服务器
cd my-vue-app npm run serve
Vue CLI 将启动一个开发服务器，并在浏览器中打开项目。
4、pnpm (Performant npm)
pnpm 是一个快速、高效的包管理工具，可以解决 npm 和 Yarn 中的一些性能和存储效率问题。pnpm 的安装速度比 npm 和 Yarn 快得多，因为它使用硬链接和符号链接来避免重复安装包。pnpm 通过全局存储包并使用符号链接来共享依赖，从而节省了磁盘空间。pnpm 确保每个项目都有一个独立的、隔离的依赖树，避免了依赖冲突。
pnpm 使用硬链接和符号链接来加快安装速度，节省磁盘空间。npm 在性能和存储效率上稍逊色，尤其是在大型项目中。pnpm 确保依赖树的严格隔离，防止依赖冲突。npm 的依赖管理相对宽松，可能会引发依赖冲突。pnpm 通过全局存储和共享依赖，大大减少了磁盘空间的占用。npm 每个项目都有独立的 node_modules，导致磁盘空间占用较大。
大部分基本命令在 npm 和 pnpm 中是类似的，但具体的选项和高级功能上可能有所不同。如正在启动一个新项目，并且希望利用更高效的依赖管理和更快的安装速度，可以考虑使用 pnpm。若已经在使用 npm 并且没有性能或磁盘空间问题，可以继续使用 npm。
参考文档 ：pnpm 安装使用教程