1. 创建 Vue 3 项目

# 使用 Vite 创建项目
npm create vue@latest my-vue-app

# 或使用 Vue CLI
npm install -g @vue/cli
vue create my-vue-app

创建过程中可以选择需要的功能。

2. 核心依赖安装配置

Pinia (状态管理)

npm install pinia

配置：

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

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

使用示例：

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

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

// 或者组合式 API
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

state的五种方式修改值

state的五种方式修改值
// 1.直接修改值
Test.current=2
// 2.通过$patch修改,支持单个或多个属性修改
Test.$patch({current:33})
// 3.$patch工厂函数方式
Test.$patch((state) => {
  state.current = 99;
  state.name = 'aaa'
})
// 4.$state 缺点是必须修改整个对象
Test.$state = { current: 88, name: '123' }
// 5.action
Test.setCurrent()

Vue Router (路由)

npm install vue-router@4

配置：

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

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

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

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

Sass (样式预处理器)

npm install sass -D

如果使用我写的 sass 简化函数，可以添加 submodule

git submodule add https://github.com/iLx11/xStyle.git src/styles/xstyle

全局样式配置 (vite.config.js)：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/xStyle/global.scss" as global;',
      },
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 其他常用包

Axios (HTTP 请求)

npm install axios

配置和使用：

// utils/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 添加 token 等
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default request

// api/user.js
import request from '@/utils/request'

export const getUserInfo = (id) => {
  return request.get(`/users/${id}`)
}

export const updateUser = (data) => {
  return request.post('/users/update', data)
}

Element Plus (UI 组件库)

npm install element-plus

完整引入：

// main.js
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')

按需引入 (推荐)：

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

VueUse (工具集合)

npm install @vueuse/core

使用示例：

<template>
  <div>
    <p>鼠标位置: x: {{ x }}, y: {{ y }}</p>
    <p>窗口大小: {{ width }} x {{ height }}</p>
    <button @click="toggleDark()">切换主题</button>
  </div>
</template>

<script setup>
import { useMouse, useWindowSize } from '@vueuse/core'
import { useDark, useToggle } from '@vueuse/core'

const { x, y } = useMouse()
const { width, height } = useWindowSize()

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

日期处理 (day.js)

npm install dayjs

使用：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'

// 扩展插件
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

// 使用
const now = dayjs()
const formatted = now.format('YYYY-MM-DD HH:mm:ss')
const relative = now.from(dayjs('2023-01-01'))

4. 完整配置文件示例

package.json 依赖示例

{
  "dependencies": {
    "vue": "^3.3.0",
    "pinia": "^2.1.0",
    "vue-router": "^4.2.0",
    "axios": "^1.4.0",
    "element-plus": "^2.3.0",
    "@vueuse/core": "^10.0.0",
    "dayjs": "^1.11.0"
  },
  "devDependencies": {
    "sass": "^1.62.0",
    "sass-loader": "^13.3.0",
    "unplugin-vue-components": "^0.25.0",
    "unplugin-auto-import": "^0.16.0"
  }
}

vite.config.js 完整示例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver()],
      dts: true
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: true
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

5. 项目结构建议

src/
├── api/           # API 接口
├── assets/        # 静态资源
├── components/    # 组件
├── router/        # 路由
├── stores/        # Pinia 状态管理
├── utils/         # 工具函数
├── views/         # 页面组件
├── styles/        # 全局样式
└── main.js        # 入口文件