开始 Vue 开发之前，需要搭建合适的开发环境。本章介绍几种不同的方式，从最简单的 CDN 引入到完整的工程化配置。
最简单的方式，适合学习和简单项目。
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发版本，包含控制台警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 或生产版本，体积更小 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script> -->
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
| CDN | 地址 |
|---|---|
| jsDelivr | https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js |
| unpkg | https://unpkg.com/vue@2.7.14/dist/vue.js |
| cdnjs | https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.js |
适合现代前端项目，配合构建工具使用。
# 创建项目目录
mkdir my-vue-project
cd my-vue-project
# 初始化 package.json
npm init -y
# 安装 Vue
npm install vue@2.7.14
// CommonJS
var Vue = require('vue')
// ES Module
import Vue from 'vue'
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Vue 官方提供的脚手架工具，适合创建完整的工程化项目。
# 全局安装
npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli
# 检查版本
vue --version
# 创建新项目
vue create my-project
# 选择预设
? Please pick a preset:
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
my-project/
├── node_modules/
├── public/
│ ├── favicon.ico
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── router/
│ ├── store/
│ ├── views/
│ ├── App.vue
│ └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── vue.config.js
Vite 是新一代构建工具，开发体验更好。
# 创建项目
npm create vite@latest my-vue-project -- --template vue
# 进入项目
cd my-vue-project
# 安装依赖
npm install
# 启动开发服务器
npm run dev
Vue CLI vs Vite
| 特性 | Vue CLI | Vite |
|---|---|---|
| 构建工具 | Webpack | esbuild + Rollup |
| 开发启动 | 较慢 | 极快 |
| 热更新 | 较快 | 极快 |
| 配置复杂度 | 较高 | 较低 |
| 生态成熟度 | 成熟 | 发展中 |
新项目推荐使用 Vite，现有项目可继续使用 Vue CLI。
VS Code 是目前最流行的选择：
推荐插件：
| 插件 | 用途 |
|---|---|
| Vetur | Vue 2 语法高亮、智能提示 |
| Vue 3 Snippets | 代码片段 |
| ESLint | 代码检查 |
| Prettier | 代码格式化 |
| Auto Close Tag | 自动闭合标签 |
| Auto Rename Tag | 自动重命名标签 |
Vue DevTools 是必备的调试工具：
功能包括：
推荐使用 LTS 版本：
# 检查 Node 版本
node -v
# 推荐使用 nvm 管理 Node 版本
nvm install --lts
nvm use --lts
ESLint 可以帮助发现代码问题，保持代码风格一致。
npm install -D eslint eslint-plugin-vue
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
// .vscode/settings.json
{
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
"vue"
]
}
使用国内镜像：
# 设置 npm 镜像
npm config set registry https://registry.npmmirror.com
# 或使用 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
# macOS/Linux 修改 npm 全局目录
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
# 清除缓存
npm cache clean --force
# 删除 node_modules 重新安装
rm -rf node_modules package-lock.json
npm install
| 方式 | 适用场景 |
|---|---|
| CDN | 学习、简单页面 |
| NPM | 自定义构建配置 |
| Vue CLI | 完整工程化项目 |
| Vite | 新项目、追求开发体验 |
根据项目需求选择合适的方式。学习阶段推荐 CDN 或 Vite，正式项目推荐 Vite 或 Vue CLI。