安装vuejs3的步骤

发布时间：2021-09-02 16:46:19 作者：chen
来源：亿速云阅读：133

# 安装Vue.js 3的步骤

Vue.js 3作为当前最流行的前端框架之一，以其轻量级、高性能和渐进式设计受到开发者青睐。本文将详细介绍Vue.js 3的多种安装方式及配套工具链配置，涵盖从基础环境准备到项目创建的完整流程。

## 一、环境准备

### 1. Node.js安装
Vue.js 3的运行依赖Node.js环境，建议安装LTS版本（当前推荐18.x+）：

```bash
# 在Windows/macOS上：
1. 访问官网 https://nodejs.org 下载安装包
2. 运行安装向导（建议勾选npm package manager）
3. 验证安装：
   node -v  # 应显示版本号如v18.16.0
   npm -v   # 应显示版本号如9.5.1

# Linux用户（Ubuntu示例）：
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

2. 包管理器选择

推荐使用更快的pnpm或yarn：

# 安装pnpm
npm install -g pnpm

# 或安装yarn
npm install -g yarn

二、Vue.js 3安装方式

方式1：CDN引入（快速原型开发）

适合学习或简单demo：

<!-- 开发环境版本 -->
<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>

使用示例：

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  createApp({
    data() {
      return { message: 'Hello Vue!' }
    }
  }).mount('#app')
</script>

方式2：Vite创建项目（推荐）

Vite是Vue官方推荐的构建工具：

# 使用npm
npm create vue@latest

# 使用pnpm
pnpm create vue@latest

# 使用yarn
yarn create vue@latest

交互式命令行将引导你： 1. 输入项目名称 2. 选择需要集成的功能（TypeScript、JSX、Router、Pinia等） 3. 完成创建后：

   cd your-project-name
   npm install
   npm run dev

方式3：Vue CLI（传统方式）

虽然Vue CLI仍支持，但已进入维护模式：

npm install -g @vue/cli
vue create my-project
# 选择Vue 3预设

三、项目结构解析

典型Vite+Vue3项目结构：

my-project/
├── public/                # 静态资源
├── src/
│   ├── assets/            # 模块资源
│   ├── components/        # 组件
│   ├── App.vue            # 根组件
│   └── main.js           # 入口文件
├── index.html             # 主页面
├── vite.config.js         # Vite配置
└── package.json

四、进阶配置

1. 单文件组件(SFC)支持

确保编辑器安装Volar扩展（替代Vetur）： - VS Code搜索安装”Vue Language Features (Volar)” - 禁用Vetur（如果已安装）

2. 添加路由

安装Vue Router 4：

npm install vue-router@4

配置示例：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('../views/Home.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 状态管理（Pinia）

安装推荐的状态库：

npm install pinia

使用示例：

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

五、构建与部署

开发模式

npm run dev

生产构建

npm run build

生成的文件位于dist/目录

预览生产版本

npm run preview

六、常见问题解决

版本兼容问题：
- 确保所有Vue相关包版本兼容（如vue@3.x应与vue-router@4.x搭配）

ESLint配置：

npm install eslint eslint-plugin-vue --save-dev

配置.eslintrc.js：

module.exports = {
 extends: ['plugin:vue/vue3-recommended']
}

浏览器兼容：在vite.config.js中添加： “`javascript import legacy from ‘@vitejs/plugin-legacy’

export default { plugins: [ legacy({ targets: [‘defaults’, ‘not IE 11’] }) ] }


## 七、TypeScript支持

1. 创建时选择TypeScript模板，或手动添加：
```bash
npm install -D typescript @vue/compiler-sfc

配置tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

八、测试环境配置

单元测试（Vitest）

npm install -D vitest @vue/test-utils jsdom

配置vite.config.js：

/// <reference types="vitest" />
export default {
  test: {
    globals: true,
    environment: 'jsdom'
  }
}

九、持续集成示例（GitHub Actions）

.github/workflows/ci.yml示例：

name: CI
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run test:unit

结语

通过以上步骤，您已经完成了Vue.js 3开发环境的完整配置。建议定期更新依赖保持版本最新：

npm outdated
npm update

更多高级特性可参考官方文档。Happy coding! “`