VUE3 0專案配置

1、專案結構

┌─dist                    生產打包輸出目錄

├─node_modules 模組依賴包
├─public 靜態html和**圖示
├─src
│ ┌─assets 靜態資源，圖示字型、、樣式表
│ ├─components 公共元件
│ ├─plugins 外掛程式
│ ├─utils 公共js方法
│ ├─views 檢視元件
│ ├─login 登入註冊
│ ├─ordermanage 訂單管理
│ ├─main.js vue入口檔案
│ ├─router.js 路由管理
│ └─store.js vuex狀態管理
├─test 測試打包輸出目錄
├─.env 環境變數配置
├─.env.development 開發(測試)模式環境變數
├─.env.production 生產模式環境變數
└─vue.config.js 配置檔案

vue.config.js

const path=require('path')

function resolve(dir)
const projectname=require('./package.json').name
module.exports=}},
devserver: 
},'/mall': 
},'/design': }}
},configurewebpack:}}
}

3.1、備用環境，當其他兩個配置出錯會使用該配置

.env

outputdir="dist"

3.2、開發（本地）環境

.env.development

outputdir="test"

node_env="development"

4.3、生產（線上）環境

.env.production

outputdir="dist"

node_env="production"

5、配置執行命令

package.json 修改此檔案中的如下內容

"private": true,

"scripts":

npm install

npm run serve // 本地執行
npm run build // 生產打包
npm run test // 測試打包
npm run lint

7、主入口

main.js

import vue from 'vue'

import './plugins/axios'
import router from './router'
import store from './store'
import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import 'styles/reset.css'
import '@/assets/iconfont/iconfont.css'
vue.use(elementui)
// 全域性守衛判斷使用者是否登入,如果未登入只能進入登入和註冊元件，其他元件重定向到登入元件
router.beforeeach((to,from,next)=>else
}elseelse
}})vue.config.productiontip = false
new vue(,
]},,,,
]})

store.js

import vue from 'vue'

import vuex from 'vuex'
vue.use(vuex)
export default new vuex.store(,
mutations: 
},actions: 
})

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.然後選擇想要的功能 這裡...

Vue3 0 多環境配置

vue3的配置相比vue2就簡化了很多了。在根目錄下新建.env.dev 開發環境 env.test 測試環境 env.prod 生產環境 檔案，具體需要幾個環境根據需要決定。env 字尾叫啥都可以，自己高興就好，當然最好也要讓別人一目了然。其他的自己照搬，改改就好了 修改package.json ...