使用vite創建vue3項目的詳細圖文教程

Posted on by

一.創建vite+vue項目

1.在命令行輸入以下創建語句。然後根據下圖所示，輸入項目名稱並選擇vue框架即可

npm create vite@latest

創建完項目後，根據提示依次輸入三條命令：

cd 項目名稱
npm install
npm run dev

二. 新建一個vue3項目

1.替換掉vite文件夾下的src文件夾

2.替換vite -> package.json中的dependencies為

“dependencies”: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
“core-js”: “^3.6.5”,
“vue”: “^3.2.37”,
“vue-router”: “^4.0.13”
}

3. 安裝依賴：npm i

4. npm run dev

三.修改vite.config.js

出現以下錯誤，是因為沒有配置別名alias ：src到@

在vite.config.js文件中修改為

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
})

四.修改router

router -> index.js

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 替換為
const router = createRouter({
  history: createWebHistory(),
  routes
})

總結

到此這篇關於使用vite創建vue3項目的詳細圖文教程的文章就介紹到這瞭,更多相關vite創建vue3項目內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：