---
# System prepended metadata

title: 初始化vue環境
tags: [vue]

---

---
title: 初始化vue環境
tags: vue
---

# 安裝套件
```bash=
npm init -y
npm i -D vite
npm i -D @vitejs/plugin-vue
npm i vue
```

# 修改npm script
```java=
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},
```

# 新增vite.config.js
```javascript=
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

```

# 新增index.html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/src/main.js"></script>
  </body>
</html>
```

# 新增 src/app.vue
```vue=
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 123,
    };
  },
};
</script>

```
# 新增 src/main.js
```javascript=
import { createApp } from 'vue';
import app from './app.vue';

createApp(app).mount('#app');

```

# 運行 vite
```bash=
npm run dev
npm run build
npm run preview
```