vue项目实现方法

Vue项目实现方法

初始化项目

使用Vue CLI或Vite创建项目框架，推荐Vue 3组合式API风格。安装依赖后，通过npm run dev启动开发服务器。

npm init vue@latest my-project
cd my-project
npm install
npm run dev

目录结构规划

典型结构包括：

• src/components 存放可复用组件
• src/views 放置页面级组件
• src/router 配置路由规则
• src/store 管理Vuex/Pinia状态
• src/assets 存放静态资源

状态管理选择

Pinia作为推荐状态库，需先安装：

npm install pinia

在main.js中初始化：

import { createPinia } from 'pinia'
app.use(createPinia())

路由配置

安装Vue Router并配置路由表：

npm install vue-router@4

示例路由配置：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

样式处理

支持SCSS/LESS预处理器，安装后需在vite.config.js配置：

npm install sass -D

组件内使用：

<style lang="scss">
$color: red;
.text { color: $color }
</style>

API请求封装

推荐使用axios进行HTTP请求：

npm install axios

封装示例：

import axios from 'axios'
const api = axios.create({ baseURL: 'https://api.example.com' })
export const getData = () => api.get('/endpoint')

构建优化

通过Vite配置实现：

• 代码分割
• 压缩资源
• 按需加载 配置示例：

  // vite.config.js
  export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'pinia']
        }
      }
    }
  }
  })

部署发布

生成生产环境构建：

npm run build

输出文件位于dist目录，可部署到任意静态服务器。如需SSR支持，需使用Nuxt.js框架。