Vue.js提供了多种安装方式，从最简单的CDN引入到使用现代化的构建工具。本章将详细介绍各种安装方法，并指导你搭建完整的Vue.js开发环境。
在开始安装Vue.js之前，请确保你已具备以下条件：
根据你的需求和项目类型，可以选择以下安装方式：
最简单快捷的方式，适合学习、原型开发或简单的页面增强。
使用npm或yarn安装，适合与现代构建工具（如Webpack）配合使用。
官方脚手架工具，提供完整的项目结构和构建配置。
新一代前端构建工具，提供极快的开发服务器启动和热更新。
创建一个新的HTML文件，例如 index.html
在<head>标签中添加Vue.js的CDN链接：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个Vue应用</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3示例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
}
});
app.mount('#app');
</script>
</body>
</html>
直接在浏览器中打开HTML文件，即可看到Vue应用运行效果。
除了jsDelivr，还可以使用以下CDN：
https://unpkg.com/vue@2/dist/vue.jshttps://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.jshttps://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js创建一个新的项目目录，并初始化npm项目：
这会生成一个package.json文件，记录项目信息和依赖。
使用npm安装Vue.js：
Vue.js需要配合构建工具使用。安装webpack和webpack-cli：
还需要配置webpack，创建webpack.config.js文件。这是使用Vue CLI或Vite更简单的原因。
Vue CLI是Vue.js官方的标准工具，提供完整的项目脚手架、构建配置和插件系统。
使用npm全局安装Vue CLI：
检查Vue CLI版本，确保安装成功：
使用Vue CLI创建新项目：
创建过程中会提示选择预设配置：
my-vue-app/
├── node_modules/ # 项目依赖
├── public/ # 静态资源
│ ├── index.html # 入口HTML文件
│ └── favicon.ico # 网站图标
├── src/ # 源代码目录
│ ├── assets/ # 资源文件（图片、样式等）
│ ├── components/ # Vue组件
│ ├── App.vue # 根组件
│ └── main.js # 入口JS文件
├── .gitignore # Git忽略配置
├── babel.config.js # Babel配置
├── package.json # 项目配置和依赖
├── README.md # 项目说明
└── vue.config.js # Vue CLI配置（可选）
Vite是新一代前端构建工具，由Vue作者尤雨溪开发，提供极快的开发服务器启动和热更新。Vue 3官方推荐使用Vite。
使用npm创建Vite项目：
创建完成后，选择Vue模板，然后选择Vue或Vue+TypeScript。
进入项目目录，安装依赖并启动开发服务器：
启动成功后，在浏览器中打开 http://localhost:3000 查看应用。
Vite在开发模式下使用原生ES模块导入，不需要打包，因此启动速度极快。而Vue CLI使用Webpack，需要在开发前打包所有模块。
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| CDN引入 |
|
|
学习、原型开发、简单页面增强 |
| npm安装 |
|
|
实际项目、需要构建流程 |
| Vue CLI |
|
|
企业级应用、大型项目 |
| Vite + Vue |
|
|
新项目、追求开发体验、Vue 3项目 |
以下工具可以极大提升Vue.js开发效率：
可以尝试以下方法：
npm config set registry https://registry.npmmirror.comnpm install -g yarnnpm install -g cnpm --registry=https://registry.npmmirror.comnpm cache clean --force根据项目需求选择：
Vue 3是未来的方向，但Vue 2仍然会长期维护。
可能是网络问题或npm源问题：
npm config set registry https://registry.npmmirror.comvue create --skip-plugins my-app跳过插件安装vue create -d my-app使用默认配置快速创建无论使用哪种安装方法，当你在浏览器中看到"Hello Vue!"或Vue的欢迎页面，并且可以修改代码并实时看到变化时，说明Vue.js已成功安装并运行。
环境搭建完成后，接下来我们将学习Vue.js的基本语法和核心概念，创建第一个完整的Vue.js应用。