Vue3 项目开发-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76428778/article/details/146976828

一、环境准备

安装 Node.js：
- 确保 Node.js 版本 >= 12.0.0，建议使用 14.18+ 或 16+ 版本。
- 访问 Node.js 官网下载并安装最新版本的 Node.js。
检查 Node.js 和 npm 安装：
- 在命令行中运行以下命令，确保 Node.js 和 npm 已正确安装：
```
node -v
npm -v
```
安装 cnpm（可选）：
- 如果需要使用淘宝镜像加速依赖包的下载，可以安装 cnpm：
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

二、创建 Vue3 项目

安装 Vite：
- 在命令行中运行以下命令全局安装 Vite：
```
cnpm install vite -g
```
创建新项目：
- 进入项目根目录，运行以下命令开始创建项目：
```
npm create vite@latest
```
- 根据提示进行以下操作：
  - 输入项目名称，例如 my-vue3-project。
  - 选择框架：选择 Vue。
  - 选择语法变体：选择 JavaScript 或 TypeScript。
进入项目目录并安装依赖：
- 进入项目目录并安装依赖：
```
cd my-vue3-project
cnpm install
```

三、项目结构说明

项目目录结构如下：

my-vue3-project/
├── node_modules/          # 项目依赖包
├── public/                # 静态资源文件
│   └── vite.svg           # 示例静态资源
├── src/                   # 源码文件夹
│   ├── App.vue            # 根组件
│   ├── assets/            # 静态资源
│   ├── components/        # 通用业务组件
│   ├── main.js            # 项目入口文件
│   └── style.css          # 样式文件
├── index.html             # 页面入口文件
├── package.json           # 项目配置文件
├── vite.config.js         # Vite 配置文件
└── README.md              # 项目说明文件

四、运行项目

在项目根目录下运行以下命令启动开发服务器：

npm run dev

浏览器会自动打开 http://127.0.0.1:5173/，你将看到 Vue3 项目的默认欢迎页面。

五、setup 语法糖插件

安装插件：
- 安装 vite-plugin-vue-setup-extend 插件：
```
npm install vite-plugin-vue-setup-extend -D
```

配置 vite.config.js：

修改 vite.config.js 文件，导入并注册 VueSetupExtend 插件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

使用 setup 语法糖：

在组件中使用 <script setup> 语法：

<template>
  <div>{{ name }}</div>
</template>

<script setup lang="ts" name="MyComponent">
import { ref } from 'vue'

const name = ref('Vue 3 Setup Component')
</script>

六、项目开发技巧与常用插件

Pinia 的使用：

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

基本使用：

在 main.ts 中配置 Pinia：

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

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

创建 store：

import { defineStore } from 'pinia'

const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

export default useStore

在组件中使用：

import { useStore } from '@/store'

const store = useStore()
console.log(store.count)

组件通信（mitt）：

安装 mitt：
```
npm i mitt
```

搭建 mitt 环境：

创建 src/utils/emitters.ts：

import mitt from 'mitt'
const emitter = mitt()
export default emitter

在组件中使用：

import emitter from '@/utils/emitters'

// 发送事件
emitter.emit('eventName', data)

// 接收事件
emitter.on('eventName', (data) => {
  console.log(data)
})

路由（vue-router）：

安装 vue-router：
```
npm i 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(),
  routes
})

export default router

在 main.ts 中注册路由：

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

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

Axios 的使用：

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

在 Vue 组件中使用 Axios：

Options API：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">数据: {{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      data: null
    }
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data')
        this.data = response.data
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    }
  }
}
</script>

Composition API：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">数据: {{ data }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const data = ref(null)

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data')
    data.value = response.data
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}
</script>

七、vite.config.js 配置

安装依赖：

安装 Vue DevTools 插件：

npm install vite-plugin-vue-devtools --save-dev

安装 setup 语法糖插件：

npm install vite-plugin-vue-setup-extend --save-dev

配置文件：

修改 vite.config.js 文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
    vueDevTools()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})