5CTO-【云原生开发】Vue3、Vite、Pinia、Axios、HTML、JS、CSS入门到项目实战

网络安全fg
33 阅读3分钟

云原生全栈开发实战：Vue3+Vite+Pinia+Axios完整指南

一、环境搭建与项目初始化

云原生开发已成为现代Web应用开发的主流范式，结合Vue3、Vite、Pinia和Axios等技术栈可以构建高效、可维护的前端应用。首先需要确保开发环境配置正确：

  1. Node.js环境：推荐使用Node.js 18+版本，可通过node -v命令验证版本。如果版本过低，可以使用nvm(Node Version Manager)进行版本管理。

  2. 创建Vite项目：Vite是新一代前端构建工具，启动速度极快：

npm create vite@latest my-vue-app --template vue-ts
  1. 安装核心依赖：
cd my-vue-app
npm install pinia axios vue-router element-plus
npm install -D sass

二、项目架构配置

1. Vite基础配置

在vite.config.ts中配置开发服务器和代理：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://your-backend-service',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

2. Pinia状态管理配置

在src/main.ts中初始化Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

创建第一个store(src/stores/counter.ts)：

import { defineStore } from 'pinia'

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

三、Axios封装与API管理

1. 封装Axios实例

创建src/utils/request.ts：

import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error)
  }
)

export default service

2. 模块化API管理

创建src/api/user.ts：

import request from '@/utils/request'

export function login(data: { username: string; password: string }) {
  return request.post('/auth/login', data)
}

export function getUserInfo() {
  return request.get('/user/info')
}

四、路由配置与权限控制

1. 路由配置

src/router/index.ts：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }
]

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

// 路由守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

五、云原生部署实践

1. Docker容器化

创建Dockerfile：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. Kubernetes部署

创建deployment.yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: vue-app
  template:
    metadata:
      labels:
        app: vue-app
    spec:
      containers:
      - name: vue-app
        image: your-registry/vue-app:latest
        ports:
        - containerPort: 80

六、工程化最佳实践

  1. 代码规范：配置ESLint和Prettier保证代码一致性
  2. 组件设计：采用原子设计理念，划分基础组件和业务组件
  3. 性能优化：
    • 使用Vite的代码分割
    • 按需加载第三方库
    • 图片压缩和懒加载
  4. 监控与日志：集成Sentry进行错误跟踪

七、完整示例：用户登录流程

  1. Login组件 (src/views/Login.vue)：
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/user'

const form = ref({
  username: '',
  password: ''
})
const router = useRouter()

const handleLogin = async () => {
  try {
    const res = await login(form.value)
    localStorage.setItem('token', res.token)
    router.push('/')
  } catch (error) {
    console.error(error)
  }
}
</script>

<template>
  <el-form @submit.prevent="handleLogin">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-button type="primary" native-type="submit">登录</el-button>
  </el-form>
</template>
  1. Home组件 (src/views/Home.vue)：
<script setup>
import { onMounted } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { getUserInfo } from '@/api/user'

const counterStore = useCounterStore()

onMounted(async () => {
  const userInfo = await getUserInfo()
  console.log(userInfo)
})
</script>

<template>
  <div>
    <h1>当前计数: {{ counterStore.count }}</h1>
    <el-button @click="counterStore.increment">增加</el-button>
  </div>
</template>

八、总结与进阶方向

本教程涵盖了云原生全栈开发的核心技术栈，从项目初始化到生产部署的全流程。要进一步提升：

  1. 深入TypeScript：强化类型系统，提高代码健壮性
  2. 微前端架构：探索模块联邦和qiankun等方案
  3. Serverless集成：结合云函数实现前后端一体化
  4. 性能监控：集成APM工具进行实时性能分析

通过持续实践这些技术，你将能够构建企业级云原生应用，满足现代Web开发的高标准要求。

avatar
文章
阅读
粉丝