vue3 0建立乙個專案

2022-05-14 11:05:01 字數 1009 閱讀 3551

使用vue3.0建立乙個專案

使用vue ui建立、管理專案

專案結構目錄整理

初始檔案新增

基本配置

跨域配置

環境配置

下面嘗試用test、preview、production分別表示測試、預覽、生產三種環境

修改package.json檔案如下

"scripts":

在專案根目錄下新建 .env.test 、 .env.preview 、 .env.production檔案,分別對應三個環境的配置檔案,注意,名字要與 --mode後面的名字分別對應

.env.test**如下

.env.prod**如下

.env.pre**如下

這樣環境配置好了,分別用以下命令來打包不同環境的包就可以了

npm run test         //

測試npm run prod //

生產npm run pre //

預發布

另外說明一點事,本地環境會預設從.env.development檔案中讀取配置

所以記得需要新建乙個然後存放配置

.env.development**如下

專案配置

從vue-cli3.0 開始build和config目錄就取消了,如果需要修改配置,可以在專案的根目錄新建乙個vue.config.js檔案來覆蓋專案的配置,訪問官方文件檢視詳細配置

//

vue.config.js

module.exports =

路由詳解(一)--基礎

router-link和router-view元件

路由配置動態路由

巢狀路由

命名路由

命名檢視

js操作路由

重定向和別名

通過vue3 0建立乙個vuetify的專案

建立完成後,我建立的名稱是vuetify 通過 cd vuetify到達該級目錄 輸入vue add vuetify命令 選擇預設項即可,下圖是安裝成功的樣子 開啟的專案目錄是這樣的 使用yarn serve 執行專案 此處需要注意,專案會開啟很慢,但是沒有報錯,在network中發現 導致專案變慢...

Vue3 0專案建立方式

1 建立vue3的3種方式 vue cli 基於腳手架2.0或者腳手架3.0 webpack 自己手動配置webpack環境 vite vue3新特性 專案名稱 vue cli3建立方式 cd projectname npm run dev2 什麼是vite?1 vite是vue作者開發的一款意圖取...

如何建立Vue3 0專案

1.首先在你想要存放專案的資料夾中輸入cmd,然後回車 2.然後輸入vue create vue mytest 後面是自己的專案檔名稱,這裡我的專案名稱為mytest 然後回車 3.然後選擇第二個 manually select features 手動選擇功能,然後回車 4.然後選擇想要的功能 這裡...