返回

Vue3-项目创建及初始化

前端

Vue3 项目创建与初始化：一个全面的指南

前言

踏入 Vue.js 的最新世界，Vue 3 带来了激动人心的新特性和改进，提升了您的应用程序开发体验。本文将指导您逐步创建和初始化一个新的 Vue 3 项目，为您提供一个坚实的基础，让您的开发之旅充满活力。

项目创建

  1. 安装 Vue CLI：
npm install -g @vue/cli
  1. 创建一个新项目：
vue create my-vue3-project
  1. 选择项目类型：

选择默认（默认设置） 选项。

  1. 选择语言和特性：

选择JavaScript 和Babel、Router、CSS 预处理器（Sass/Less）、单元测试 。

  1. 安装依赖项：

CLI 将自动安装必要的依赖项。

项目初始化

  1. 设置 TypeScript：

如果您希望使用 TypeScript，请安装相应的依赖项：

npm install -D typescript @vue/cli-plugin-typescript
vue add typescript
  1. 安装组合式 API：

组合式 API 是 Vue 3 中的新特性，它提供了更灵活和可重用的代码编写方式。

npm install -D @vue/composition-api
  1. 安装 Pinia：

Pinia 是一个状态管理库，它简化了在 Vue 应用程序中管理状态。

npm install pinia
vue add pinia
  1. 安装 Axios：

Axios 是一个用于进行 HTTP 请求的流行库。

npm install axios
  1. 安装 Pinia 持久化状态插件：

该插件允许您在页面刷新后持久化 Pinia 状态。

npm install pinia-plugin-persistedstate
vue add pinia-plugin-persistedstate
  1. 安装进度条加载：

使用 Ant Design 的进度条加载组件来提升用户体验。

npm install ant-design-vue

应用自定义设置

  1. 在 main.js 中配置 Vue 实例：
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 组合式 API
app.use(createPinia())

// Axios
app.provide('axios', axios)

// 进度条加载
app.use(Antd)

app.mount('#app')
  1. 修改 package.json 文件：
  • 将 "browserslist" 设置为 ["defaults", "not IE 11"]。
  • 添加 "scripts" 块：
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}
  1. 创建 .env 文件：

添加环境变量，如 API URL：

VUE_APP_API_URL=https://example.com/api

结论

遵循本指南中的步骤，您将创建一个现代化且功能齐全的 Vue 3 项目，具备以下特性：

  • 组合式 API
  • Pinia 状态管理
  • Axios HTTP 请求
  • 持久化状态
  • 进度条加载

随着您深入探索 Vue 3 的世界，继续探索其他特性和插件，以释放您应用程序的全部潜力。祝您开发愉快！

附录