--- 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 ```