搭建開發環境
Node.js官方地址：https://nodejs.org/zh-cn/
下載安裝版本：14.15.4長期支持版(LTS)
Visual Studio Code官網地址：https://code.visualstudio.com/
下載安裝版本：Windows x64
省略安裝步驟了，注意的一點就是安裝路徑最好修改一下
安裝路徑：D:\Programs\VSCode
安裝插件
- Chinese (Simplified) Language Pack for Visual Studio Code
- Auto Rename Tag
- Element UI Snippets
- HTML CSS Support
- Live Server
- Node Snippets
- open in browser
- Path Intellisense
- Vetur
- Vue 2 Snippets
開始創建專案
-
打開專案的父路徑
D:\VueStudy\
-
在檔案路徑里面輸入cmd命令回車，會彈出cmd視窗
D:\WebStudy> -
輸入創建專案模板命令
## 獲取模板專案 ## devextreme-vue-mes 就是你專案檔案夾名稱 npx -p devextreme-cli devextreme new vue-app devextreme-vue-mes ## 這里選Vue version (v2)，然后按回車鍵 ?What verion do you want? > Vue version (v2) vue version (v3) ## 這里選Side navigation (outer toolbar)，然后回車 ?What layout do you want to add? > Side navigation (outer toolbar) Side navigation (inner toolbar) ## 安裝會稍微時間長一點，耐心等待 ## 類似資訊說明完成安裝 added 188 packages from 167 contributors in 50.693s -
啟動專案
## 用Visual Studio Code打開專案父檔案夾 ## 在專案路徑下 [集成終端]中 輸入 npm run serve ## 按住Ctrl鍵滑鼠左鍵 http://localhost:8080/devextreme-vue-template/ - Local: http://localhost:8080/devextreme-vue-template/ - Network: http://192.168.0.101:8080/devextreme-vue-template/ -
運行結果
配置專案
添加檔案
vue.config.js：專案檔案夾的根目錄上添加
module.exports = {
devServer: {
port: 8001, // 埠號，如果埠號被占用，會自動提升1
host: "localhost", //主機名， 127.0.0.1， 真機 0.0.0.0
https: false, //協議
open: true, //啟動服務時自動打開瀏覽器訪問
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_SERVICE_URL,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '',
}
}
}
},
lintOnSave: false, // 關閉格式檢查
productionSourceMap: false, // 打包時不會生成 .map 檔案，加快打包速度
// filenameHashing: false, 打包時，靜態檔案不會生成hash值
};
.env.development:專案檔案夾的根目錄上添加
# 開發模式的配置資訊
# 服務介面地址
VUE_APP_SERVICE_URL = http://localhost:3000/api/
# base api
VUE_APP_BASE_API = '/dev-api'
.env.production:專案檔案夾的根目錄上添加
# 生產模式的配置資訊
# 服務介面地址
VUE_APP_SERVICE_URL = 'http://localhost:7300/mock/5ffdc31567ed59160bfb3156'
# base api
VUE_APP_BASE_API = '/pro-api'
備份模板
專案模板檔案夾：VueTemplate檔案夾
做好專案模板之后，我們要把專案模板存起來，以后可以繼續用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/258012.html
標籤：其他
上一篇：實作一個簡單的靜態博客生成器
下一篇：CSS Flex 彈性布局使用