vite搭建vue3項目

vite需要node版本在12以上

1.創建vue項目

• 使用npm

npm init @vitejs/app

• 使用yarn

yarn create @vitejs/app

選擇vue

選擇ts模板

之后照着執行就ok，這樣一個簡單的項目就完成了

2.引入vue-router

下載vue-router4

npm install vue-router@next --save

在項目中創建router文件夾，在文件夾下創建router.ts

import { createRouter, RouteRecordRaw , Router, createWebHistory} from 'vue-router'

const routes: Array<RouteRecordRaw> = [
 {
  path: '/home',
  name: 'Home',
  component: () => import('@/views/Home.vue'),
  meta: {
   title: '首頁'
  }
 }
]

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

export default router

在main.ts中引入router

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

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

將app.vue中內容替換

<template>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App'
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序
    //host: 'localhost',  // 指定服務器主機名
    port: 8888, // 指定服務器端口
    proxy: { // 為開發服務器配置自定義代理規則

    }
  }
})

碰到的問題：

__dirname報錯： 解決辦法
npm install --save-dev @types/node


之后正常啟動項目