vue3项目实战之脚手架入门

最新推荐文章于 2024-10-14 21:40:08 发布

前端小栈

最新推荐文章于 2024-10-14 21:40:08 发布

阅读量1k

点赞数 26

分类专栏：前端 typeScript vue3 文章标签： vue.js typescript 前端

本文链接：https://blog.csdn.net/qq_39540458/article/details/141021997

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

typeScript

5 篇文章 0 订阅

订阅专栏

1. 环境准备与项目初始化

1.1 检查 Node.js 环境

确保本地开发环境中已安装 Node.js，可以通过在终端执行 node -v 来检查 Node.js 版本。当前 Vite 推荐使用 Node.js 的版本为 14.18.0 或更高版本。

1.2 使用 Vite 创建 Vue3 项目

通过 npm 或 yarn 安装 Vite，并使用以下命令创建一个新的 Vue3 项目：

npm create vite@latest my-vue-app --template vue

该命令会引导你完成项目创建流程，包括选择项目模板、安装依赖等步骤。项目创建完成后，进入项目目录，安装额外的依赖：

cd my-vue-app
npm install --save vue-router@4 axios pinia element-plus

接下来，安装 TypeScript 支持：

npm install --save-dev typescript @vitejs/plugin-vue @vitejs/plugin-typescript

在项目根目录下创建 tsconfig.json 文件，配置 TypeScript 编译选项。

2. 技术框架配置

2.1 TypeScript 配置

在 tsconfig.json 中设置项目的基础 TypeScript 配置，包括 target, module, strict 等选项，以确保代码的类型安全和质量。

2.2 Pinia 状态管理

在项目中设置 Pinia 作为状态管理库，创建 store 目录，并定义全局状态管理逻辑。

2.3 Vue Router 路由配置

安装并配置 Vue Router，创建 router 目录，并设置路由规则，以支持单页面应用的页面路由跳转。

2.4 Axios 网络请求

配置 Axios 作为 HTTP 客户端，设置基础 URL、拦截器等，以简化网络请求流程。

2.5 Element Plus UI 框架

安装 Element Plus 并按需引入组件，配置其样式和脚本，以快速构建界面。

3. 项目开发与测试

3.1 组件与视图开发

开发单文件组件（.vue 文件），使用 Vue3 的 Composition API 组织逻辑和状态。

3.2 单元测试

使用 Vue Test Utils 和 Vite 的测试工具配置单元测试，确保组件和逻辑的正确性。

3.3 端到端测试

使用 Cypress 或类似工具进行端到端测试，模拟用户交互，确保应用流程符合预期。

4. 代码质量和风格

4.1 ESLint 代码质量检查

集成 ESLint，并配置相应的规则，以自动检测代码中的错误和潜在问题。

4.2 Prettier 代码格式化

使用 Prettier 进行代码格式化，确保代码风格的统一和整洁。

5. 部署与监控

5.1 项目构建

配置 Vite 的构建脚本，使用 npm run build 命令打包应用，准备部署。

5.2 自动化部署

集成 CI/CD 流程，使用 GitHub Actions 或 GitLab CI 自动化测试和部署流程。

5.3 性能监控

使用 Vercel 或 Netlify 等平台部署应用，并利用其性能监控工具监控应用运行情况。

2. 技术框架配置

2.1 TypeScript 集成

TypeScript 作为 JavaScript 的超集，为 Vue 3 项目提供了类型安全和更现代的编码特性。在 Vite 项目中集成 TypeScript，首先需要在项目中安装 TypeScript 相关的依赖：

npm install --save-dev typescript @vitejs/plugin-vue@alpha

接着，在项目根目录下创建 tsconfig.json 文件，配置 TypeScript 的编译选项，例如：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "es2020",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

在 Vite 配置文件 vite.config.js 中添加 TypeScript 插件：

import vue from '@vitejs/plugin-vue';
import typescript from '@vitejs/plugin-typescript';

export default {
  plugins: [vue(), typescript()]
}

2.2 Pinia 状态管理

Pinia 是 Vue 3 的状态管理库，用于替代 Vuex。首先安装 Pinia：

npm install pinia

在项目中创建一个 store 目录，并在其中定义 Pinia 存储：

// src/store/index.ts
import { createStore, createStores } from 'pinia';

const useMyStore = createStore({
  id: 'myStore',
  state: () => ({
    count: 0
  }),
  // 可以添加 actions 和 getters 等
});

export default useMyStore;

在 main.ts 中初始化 Pinia 并将其挂载到 Vue 应用上：

import { createApp } from 'vue';
import App from './App.vue';
import useMyStore from './store';

const app = createApp(App);

app.use(useMyStore);
app.mount('#app');

2.3 Vue Router 路由管理

Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。首先安装 Vue Router：

npm install vue-router@4

创建路由文件和目录，定义路由配置：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

在 main.ts 中引入并使用 Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);
app.mount('#app');

2.4 Axios 网络请求

Axios 是一个基于 promise 的 HTTP 库，用于浏览器和 node.js。首先安装 Axios：

npm install axios

在项目中创建一个 Axios 实例并配置基础 URL 和拦截器等：

// src/utils/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VITE_API_BASE_URL,
  // 其他配置...
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

export default instance;

在组件中使用 Axios 实例进行数据请求：

// 在组件中
import axiosInstance from '@/utils/axios';

axiosInstance.get('/some-endpoint')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误情况
  });

2.5 Element Plus UI 框架

Element Plus 是一个 Vue 3 的组件库，提供了一套丰富的组件用于构建用户界面。首先安装 Element Plus：

npm install element-plus

在 main.ts 中全局引入 Element Plus 并使用其样式：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');

在组件中使用 Element Plus 组件：

<template>
  <el-button>Button</el-button>
</template>

2.6 测试

为了确保代码质量和功能的稳定性，使用 Vue Test Utils 和 Jest 进行单元测试和端到端测试：

npm install --save-dev @vue/test-utils jest

创建测试文件，例如：

// src/components/MyComponent.spec.ts
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

describe('MyComponent', () => {
  it('renders props.msg', () => {
    const msg = 'Hello';
    const wrapper = mount(MyComponent, {
      props: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

配置 Jest 以使用 Vue Test Utils：

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
};

运行测试：

npm run test

2.7 代码质量和风格

为了统一代码风格和提高代码质量，使用 ESLint 和 Prettier：

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier prettier eslint-config-prettier

创建 .eslintrc.js 配置文件：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

在 package.json 中添加 Prettier 配置：

"prettier": {
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

运行 ESLint 和 Prettier：

npx eslint --ext .js,.ts,.vue src/
npx prettier --write src/

2.8 部署

部署 Vue 3 应用到生产环境，可以使用 Vite 的构建命令来生成优化后的静态资源：

npm run build

生成的 dist 目录包含了用于生产的静态资源，可以部署到各种静态文件服务器或 CDN 上。

3. 核心库集成

3.1 Axios 网络请求

Axios 是一个基于 promise 的 HTTP 客户端，适用于浏览器和 node.js 环境。在 Vue 3 项目中，Axios 通常用于处理网络请求。

安装 Axios：
```
npm install axios
```

创建 Axios 实例并配置基础 URL：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VITE_API_BASE_URL,
  timeout: 5000
});

export default service;

在组件中使用 Axios 发送请求：

import { ref } from 'vue';
import service from '/axios-service';

export default {
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await service.get('/data');
        data.value = response.data;
      } catch (error) {
        console.error('Error fetching data: ', error);
      }
    };

    fetchData();

    return { data };
  }
};

3.2 Element Plus UI 组件库

Element Plus 是一个基于 Vue 3 的组件库，提供了一系列预设计的组件，以快速构建高质量的前端界面。

安装 Element Plus：
```
npm install element-plus
```

全局注册 Element Plus 组件：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

在组件中使用 Element Plus 组件：

<template>
  <el-button type="primary">Element Plus Button</el-button>
</template>

<script>
export default {
  // Component logic
};
</script>

4. 技术框架补充

4.1 TypeScript 配置

TypeScript 为 JavaScript 提供了类型系统，增强了代码的可读性和可维护性。

在 Vite 中使用 TypeScript：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "es2020",
    "strict": true,
    "jsx": "preserve"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
}

4.2 Pinia 状态管理

Pinia 是 Vue 3 的官方状态管理库，用于构建高效且可扩展的应用程序。

安装 Pinia：
```
npm install pinia
```

创建 Pinia 存储：

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0
  }),
  // Other options...
});

4.3 Vue Router 路由管理

Vue Router 是 Vue 3 的官方路由管理器，用于构建单页面应用程序。

安装 Vue Router：
```
npm install vue-router@4
```

创建和配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  { path: '/', component: Home },
  // Define other routes...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

4.4 代码质量和风格

使用 ESLint 和 Prettier 来确保代码质量和风格一致性。

安装 ESLint 和 Prettier：

npm install eslint prettier eslint-plugin-prettier --save-dev

配置 ESLint 和 Prettier：

{
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

4.5 测试

使用 Vue Test Utils 和 Jest 进行单元测试和集成测试。

安装 Vue Test Utils 和 Jest：
```
npm install @vue/test-utils jest
```

编写测试用例：

import { shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

describe('MyComponent', () => {
  it('renders properly', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.text()).toMatch('Expected text');
  });
});