Vue安装 #

一、安装方式概览 #

方式	适用场景	难度
CDN引入	学习、简单页面	简单
Vite	现代项目开发	推荐
Vue CLI	传统项目构建	中等
npm/yarn	库开发、自定义构建	较高

二、CDN引入 #

2.1 直接使用 #

html

<!DOCTYPE html>
<html>
<head>
  <title>Vue CDN</title>
</head>
<body>
  <div id="app">{{ message }}</div>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue
    
    createApp({
      setup() {
        const message = ref('Hello Vue!')
        return { message }
      }
    }).mount('#app')
  </script>
</body>
</html>

2.2 CDN地址选择 #

html

<!-- 开发版本，包含警告和调试模式 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 生产版本，优化了大小和速度 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- ES模块版本 -->
<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

三、使用Vite创建项目 #

Vite是Vue官方推荐的构建工具，提供极速的开发体验。

3.1 创建项目 #

bash

# 使用npm
npm create vue@latest

# 使用yarn
yarn create vue

# 使用pnpm
pnpm create vue

3.2 项目配置选项 #

text

✔ Project name: … my-vue-app
✔ 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
✔ Add Prettier for code formatting? … No / Yes

3.3 项目结构 #

text

my-vue-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

3.4 启动项目 #

bash

cd my-vue-app
npm install
npm run dev

四、使用Vue CLI #

Vue CLI是Vue 2时代的标准工具，Vue 3仍可使用。

4.1 安装CLI #

bash

npm install -g @vue/cli
# 或
yarn global add @vue/cli

4.2 创建项目 #

bash

vue create my-project

# 使用图形界面
vue ui

4.3 预设选择 #

text

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features

4.4 手动配置 #

text

? 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

五、npm/yarn安装 #

5.1 安装Vue核心库 #

bash

# npm
npm install vue

# yarn
yarn add vue

# pnpm
pnpm add vue

5.2 安装相关库 #

bash

# Vue Router
npm install vue-router@4

# Pinia (推荐的状态管理)
npm install pinia

# Vuex (传统状态管理)
npm install vuex@next

六、开发环境配置 #

6.1 IDE推荐 #

VS Code + Volar插件

json

// 推荐的VS Code扩展
{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin"
  ]
}

6.2 Volar配置 #

json

// .vscode/settings.json
{
  "volar.completion.preferredTagNameCase": "kebab",
  "volar.completion.preferredAttrNameCase": "kebab"
}

6.3 TypeScript支持 #

bash

npm install -D typescript

json

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

七、浏览器开发者工具 #

7.1 安装Vue Devtools #

7.2 功能介绍 #

text

Vue Devtools功能：
├── 组件树查看
├── 组件状态检查
├── Vuex/Pinia状态调试
├── 路由信息查看
├── 性能分析
└── 时间旅行调试

八、版本管理 #

8.1 查看版本 #

bash

# 查看已安装版本
npm list vue

# 查看可用的Vue版本
npm view vue versions

8.2 版本约束 #

json

// package.json
{
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.2.0",
    "pinia": "^2.1.0"
  }
}

九、常见问题 #

9.1 版本不兼容 #

bash

# 确保使用Vue 3兼容的库版本
npm install vue@3 vue-router@4 pinia@2

9.2 开发服务器端口冲突 #

javascript

// vite.config.js
export default {
  server: {
    port: 3000,  // 自定义端口
    open: true   // 自动打开浏览器
  }
}

9.3 热更新失效 #

javascript

// vite.config.js
export default {
  server: {
    watch: {
      usePolling: true  // 在某些系统上需要轮询
    }
  }
}

十、总结 #

需求	推荐方式
学习Vue	CDN引入
新项目	Vite + Vue 3
企业项目	Vite + TypeScript
快速原型	Vue CLI

安装要点：

新项目推荐使用Vite
安装Vue Devtools便于调试
使用VS Code + Volar获得最佳开发体验
注意库版本的兼容性