• tree -L n 顯示項(xiàng)目的層數(shù)。n 代表你要生成文件夾樹(shù)的層級(jí);
• tree -I "node_modules|themes|public" 表示要過(guò)濾的文件或目錄, 過(guò)濾多個(gè)文件或目錄用 | 分割;
• tree > tree.md 表示將樹(shù)結(jié)構(gòu)輸出到 tree.md 這個(gè)文件;

你也可以使用powershell或cmd命令查看當(dāng)前目錄結(jié)構(gòu)
下面是如何使用PowerShell和命令提示符（cmd）查看當(dāng)前目錄結(jié)構(gòu)并排除特定文件夾的介紹：

使用 PowerShell 查看目錄結(jié)構(gòu)

PowerShell是Windows的強(qiáng)大腳本語(yǔ)言和命令行工具，它允許你執(zhí)行各種任務(wù)，包括查看和管理目錄結(jié)構(gòu)。

Get-ChildItem -Recurse | Where-Object { $_.FullName -notmatch "venv" -and $_.FullName -notmatch "vue-web\\node_modules" } | ForEach-Object { Write-Host ("  " * $_.FullName.Split("\").Length) + $_.Name }

• Get-ChildItem -Recurse：獲取當(dāng)前目錄及其子目錄中的文件和文件夾。
• Where-Object { $_.FullName -notmatch "venv" -and $_.FullName -notmatch "vue-web\\node_modules" }：使用Where-Object cmdlet來(lái)篩選掉包含"venv"和"vue-web\node_modules"的文件夾。
• ForEach-Object { Write-Host (" " * $_.FullName.Split("\").Length) + $_.Name }：遍歷結(jié)果，并以樹(shù)形結(jié)構(gòu)的方式顯示文件和文件夾。

使用命令提示符（cmd）查看目錄結(jié)構(gòu)

命令提示符是Windows的傳統(tǒng)命令行工具，用于執(zhí)行各種命令和任務(wù)。

dir /B /S | find /V "venv" | find /V "vue-web\node_modules"

• dir /B /S：以遞歸方式獲取當(dāng)前目錄及其子目錄中的文件和文件夾，/B表示以簡(jiǎn)潔方式列出文件和文件夾。
• find /V "venv"：使用find命令來(lái)排除包含"venv"的文件夾。
• find /V "vue-web\node_modules"：再次使用find命令來(lái)排除包含"vue-web\node_modules"的文件夾。

這兩種方法允許你查看目錄結(jié)構(gòu)，并排除特定文件夾，以使目錄結(jié)構(gòu)更清晰。根據(jù)你的需要，你可以選擇使用PowerShell或命令提示符來(lái)執(zhí)行這些操作。

二、預(yù)覽項(xiàng)目

YourFlaskProject用pycharm打開(kāi)
YourFlaskProjectvue-web單獨(dú)用vscode打開(kāi)
你也可以使用我的bat腳本

1. 打包完成后，回到 app.py 文件中，引入 index.html。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

運(yùn)行 Python-flask項(xiàng)目。您將看到服務(wù)器正在運(yùn)行。訪問(wèn)項(xiàng)目時(shí)，會(huì)遇到 404 錯(cuò)誤，因?yàn)殪o態(tài)文件無(wú)法加載。

三、修改項(xiàng)目加載靜態(tài)資源

1. 繼續(xù)修改 vue.config.js 文件，配置 assetsDir：

module.exports = {
  outputDir: '../static',
  indexPath: '../templates/index.html',
  assetsDir: 'static/'
}

修改后使用build打包項(xiàng)目
同樣三種方法,推薦cnpm

yarn run build

npm run build

cnpm run build

這代碼段是在vue.config.js中的配置，它定義了一些重要的選項(xiàng)，用于自定義Vue CLI項(xiàng)目的構(gòu)建輸出和靜態(tài)資源的路徑。讓我來(lái)解釋這些選項(xiàng)的作用：

• outputDir: ‘…/static’:

  • 這選項(xiàng)指定了在運(yùn)行yarn run build時(shí)，構(gòu)建生成的生產(chǎn)環(huán)境文件的目錄。在這里，構(gòu)建生成的文件將會(huì)存儲(chǔ)在項(xiàng)目根目錄的static目錄下。
  • 這對(duì)于將Vue構(gòu)建生成的文件輸出到與Flask或其他后端框架的靜態(tài)文件目錄相匹配的位置非常有用。

• indexPath: ‘…/templates/index.html’:

  • indexPath選項(xiàng)用于指定生成的index.html文件的輸出路徑，相對(duì)于outputDir。在這里，它被配置為輸出到項(xiàng)目根目錄下的templates目錄中。
  • 這是為了確保生成的HTML文件在與后端框架相匹配的位置，以便后端框架可以渲染HTML頁(yè)面。

• assetsDir: ‘static/’:

  • assetsDir選項(xiàng)定義了放置生成的靜態(tài)資源（如JavaScript、CSS、圖像、字體等）的目錄，相對(duì)于outputDir。在這里，靜態(tài)資源會(huì)存儲(chǔ)在static/static目錄下。
  • 這是為了確保靜態(tài)資源被正確引用并加載。在前端項(xiàng)目中，靜態(tài)資源的路徑將包括assetsDir的設(shè)置。

綜合來(lái)說(shuō)，這些選項(xiàng)的配置是為了確保Vue CLI項(xiàng)目的構(gòu)建輸出與后端框架（這里是Flask）的靜態(tài)文件和模板文件的目錄結(jié)構(gòu)相匹配，以便前后端的協(xié)作能夠順利進(jìn)行。通過(guò)配置這些選項(xiàng)，你可以更好地管理前后端分離項(xiàng)目的靜態(tài)資源和HTML文件的位置。

2. 修改 app.py 文件，為 Flask 應(yīng)用添加靜態(tài)資源目錄：

from flask import Flask, render_template

app = Flask(__name__, static_folder='./static/static')

@app.route('/')
def hello_world():
    return render_template('index.html')

if __name__ == '__main__': 
    app.run() 

3. 重新運(yùn)行 Python 文件。靜態(tài)資源路徑引入將正常工作。

你也許會(huì)碰到304，這里是正?，F(xiàn)象

根據(jù)日志信息，HTTP請(qǐng)求返回的狀態(tài)碼都是200或304，這意味著Flask服務(wù)器成功響應(yīng)了這些請(qǐng)求。具體狀態(tài)碼的含義如下：

• 200：表示請(qǐng)求成功。這是對(duì)根路徑（/）的請(qǐng)求，F(xiàn)lask成功響應(yīng)，返回200狀態(tài)碼。

• 304：表示請(qǐng)求的資源未被修改，因此服務(wù)器返回304狀態(tài)碼，告訴瀏覽器可以使用緩存的資源，而不必重新下載。這通常發(fā)生在靜態(tài)資源（如JavaScript和CSS文件）的請(qǐng)求中，瀏覽器已經(jīng)緩存了這些資源，并且它們?cè)诜?wù)器端沒(méi)有發(fā)生變化。

從日志中看，HTTP請(qǐng)求都是成功的，沒(méi)有404錯(cuò)誤。這意味著前端的資源文件（如JavaScript、CSS）被成功加載。如果你在瀏覽器中看到404錯(cuò)誤，有可能是瀏覽器緩存問(wèn)題，嘗試清除瀏覽器緩存或在瀏覽器中打開(kāi)開(kāi)發(fā)者工具來(lái)禁用緩存，然后刷新頁(yè)面以查看是否能夠加載正確的資源。

總之，根據(jù)日志信息，F(xiàn)lask服務(wù)器成功響應(yīng)了請(qǐng)求，問(wèn)題可能出在瀏覽器緩存或其他相關(guān)設(shè)置上。

四、對(duì)項(xiàng)目添加靜態(tài)資源

1. favicon.ico路徑修改

首先，在項(xiàng)目的 vue-web/public/ 文件夾下創(chuàng)建一個(gè)名為 static 的文件夾，并將 favicon.ico 文件放入其中。

vue-web/public/
├── index.html
└── static
    └── favicon.ico

原始index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

接著，需要修改 vue-web/public/ 文件夾下的 index.html 文件，以正確引用 favicon.ico 的路徑：

<link rel="icon" href="static/favicon.ico">

隨后，執(zhí)行以下步驟：

1. 運(yùn)行 yarn run build 來(lái)打包 Vue 項(xiàng)目。
2. 重新運(yùn)行 app.py 文件。
3. 用瀏覽器打開(kāi) http://127.0.0.1:5000/。

此時(shí)，favicon.ico 將能夠正常加載。

2. 添加靜態(tài)JS文件（如jquery.js）

通常情況下，Vue CLI 創(chuàng)建的項(xiàng)目默認(rèn)不會(huì)將 jQuery 添加到全局 window 對(duì)象中。如果你希望在 Vue 項(xiàng)目中使用 jQuery，你需要手動(dòng)導(dǎo)入并將其掛載到 Vue 實(shí)例上。

1. 安裝 jQuery：

首先，你需要通過(guò) npm 或 yarn 安裝 jQuery：

cnpm install jquery

或者

yarn add jquery

2.下載jquery.js

你可以從官方 jQuery 網(wǎng)站或通過(guò) Content Delivery Network (CDN) 來(lái)獲取 jQuery。

1. 官方 jQuery 網(wǎng)站：你可以訪問(wèn) jQuery 的官方網(wǎng)站（https://jquery.com/），然后在頁(yè)面上找到一個(gè)下載 jQuery 的鏈接。從這里你可以下載最新版本的 jQuery。

2. CDN：很多網(wǎng)站使用 CDN 來(lái)加載 jQuery，這可以提高網(wǎng)頁(yè)加載速度并減輕服務(wù)器負(fù)擔(dān)。你可以使用像 Google CDN 或 Microsoft CDN 這樣的服務(wù)來(lái)獲取 jQuery。以下是一些獲取 jQuery 的 CDN 示例：

   Google CDN:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   

   Microsoft CDN:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
   

只需將這些鏈接添加到你的 HTML 頁(yè)面中的 <script> 標(biāo)簽中，你就可以在網(wǎng)頁(yè)中使用 jQuery 了。確
請(qǐng)注意，jQuery 一直在發(fā)展，新版本可能會(huì)出現(xiàn)。建議使用最新的穩(wěn)定版本以獲取最新功能和安全更新。

這段文本提供了關(guān)于從官方 jQuery 網(wǎng)站下載不同版本的 jQuery 文件的信息。以下是其中包含的內(nèi)容的解釋?zhuān)?/p>

1. Compressed and Uncompressed Copies: jQuery提供了壓縮（compressed）和未壓縮（uncompressed）版本的文件。未壓縮文件在開(kāi)發(fā)或調(diào)試過(guò)程中最有用，因?yàn)樗子陂喿x和理解，而壓縮文件在生產(chǎn)環(huán)境中更適合，因?yàn)樗鼫p少了帶寬使用并提高了性能。開(kāi)發(fā)者通常在開(kāi)發(fā)時(shí)使用未壓縮版本，而在生產(chǎn)環(huán)境中使用壓縮版本。

2. Sourcemap File: Sourcemap 文件是用于調(diào)試壓縮文件時(shí)的工具。它不是必需的，但可以提高開(kāi)發(fā)人員的調(diào)試體驗(yàn)。當(dāng)你在生產(chǎn)環(huán)境中使用壓縮版本的 jQuery 時(shí)，可以下載并使用 sourcemap 文件來(lái)更輕松地調(diào)試你的代碼。

3. jQuery 1.11.0/2.1.0 and sourceMappingURL Comment: 從 jQuery 1.11.0 和 2.1.0 版本開(kāi)始，壓縮文件中不再包含 //# sourceMappingURL 注釋。這是為了減小文件大小。

4. Local Download: 你可以通過(guò)右鍵單擊鏈接并選擇“另存為…”來(lái)本地下載這些文件。

5. Slim Build: jQuery 也提供了“slim build”，它排除了 ajax 和 effects 模塊，以減小文件大小。這對(duì)于只需要 jQuery 的核心功能而不需要這些額外模塊的情況很有用。

6. Release Notes: 此文本還提供了指向 jQuery 3.7.1 版本的博客帖子的鏈接，其中包含了有關(guān)此版本的發(fā)布說(shuō)明（release notes）。

總之，你可以根據(jù)你的需求選擇不同版本和構(gòu)建類(lèi)型的 jQuery 文件，然后下載它們以在你的項(xiàng)目中使用。如果你需要幫助升級(jí) jQuery，還建議查看與你所使用版本相關(guān)的升級(jí)指南，并考慮使用 jQuery Migrate 插件以幫助在新版本中遷移舊版本的代碼。

3.將 jquery.js 文件放入項(xiàng)目的 vue-web/public/static/ 文件夾中：

vue-web/public/
├── index.html
└── static
    ├── favicon.ico
    └── jquery.js

然后，在 index.html 文件中引入 jquery.js：

<script src="static/jquery.js"></script>

4. 打包 Vue 項(xiàng)目并重新運(yùn)行 app.py 文件。

同樣三種方法,推薦cnpm

yarn run build

npm run build

cnpm run build

當(dāng)你在項(xiàng)目中添加了 favicon.ico 和 jquery.js 后，進(jìn)行兩次打包的具體作用和效果如下：

兩次打包c(diǎn)npm run build解釋

第一次打包：

1. 加入 favicon.ico：

   • 將 favicon.ico 放置在 static 文件夾中，這是一個(gè)網(wǎng)站的圖標(biāo)文件，通常會(huì)顯示在瀏覽器標(biāo)簽頁(yè)上。
   • 修改了 vue-web/public/index.html 文件，將 favicon.ico 的引用路徑修改為 static/favicon.ico。

   這一步的作用是確保在后續(xù)的項(xiàng)目部署和運(yùn)行過(guò)程中，網(wǎng)站可以正確加載并顯示自定義的圖標(biāo)。

2. 運(yùn)行 yarn run build 進(jìn)行第一次打包：

   • 執(zhí)行這個(gè)命令會(huì)觸發(fā) Vue CLI 進(jìn)行項(xiàng)目的打包操作。
   • 打包會(huì)將前端代碼進(jìn)行優(yōu)化、壓縮，并生成可以在生產(chǎn)環(huán)境中運(yùn)行的版本。

   這一步的作用是生成一個(gè)優(yōu)化后的前端代碼，減少加載時(shí)間，提高網(wǎng)頁(yè)性能。

第二次打包：

1. 加入 jquery.js：

   • 將 jquery.js 放置在 static 文件夾中，這是一個(gè) JavaScript 庫(kù)文件，提供了豐富的 DOM 操作和其他功能。
   • 修改了 vue-web/public/index.html 文件，引入了 static/jquery.js。

   這一步的作用是將 jQuery 庫(kù)整合到你的項(xiàng)目中，以便在前端代碼中使用 jQuery 的功能。

2. 運(yùn)行 yarn run build 進(jìn)行第二次打包：

   • 執(zhí)行這個(gè)命令會(huì)再次觸發(fā) Vue CLI 進(jìn)行項(xiàng)目的打包操作。
   • 這次打包會(huì)將包括了 jQuery 的相關(guān)代碼在內(nèi)的前端代碼重新優(yōu)化、壓縮，并生成可在生產(chǎn)環(huán)境中運(yùn)行的版本。

   這一步的作用是將 jQuery 整合到了你的項(xiàng)目中，使得你可以在前端代碼中使用 jQuery 相關(guān)的功能。

總結(jié)起來(lái)，這兩次打包的過(guò)程確保了：

• 網(wǎng)站能夠正確加載并顯示自定義的圖標(biāo)（favicon.ico）。
• 項(xiàng)目成功整合了 jQuery 庫(kù)，使得你可以在前端代碼中使用 jQuery 的功能。

這兩步驟保證了前端資源正確加載，從而保障整個(gè)項(xiàng)目的正常運(yùn)行。

5. 檢驗(yàn) jQuery是否引入成功：

F12然后打開(kāi)瀏覽器控制臺(tái)console輸入

console.log(window.$)

console.log(window.$) 打印出了 jQuery 相關(guān)信息是因?yàn)樵跒g覽器環(huán)境中，當(dāng)你引入 jQuery 庫(kù)時(shí)，它通常會(huì)將自身附加到全局 window 對(duì)象上，以便你可以使用 $ 或 jQuery 來(lái)訪問(wèn)其功能。

這是因?yàn)?jQuery 為了方便使用，將自身作為一個(gè)全局變量暴露到 window 對(duì)象中。這樣，你可以直接在瀏覽器的控制臺(tái)中訪問(wèn)和測(cè)試 jQuery 函數(shù)。當(dāng)你在控制臺(tái)中鍵入 window.$ 時(shí)，它返回 jQuery 的函數(shù)，這是 jQuery 庫(kù)的一部分，允許你使用 $ 來(lái)選擇和操作DOM元素。

所以，console.log(window.$) 顯示了 window 對(duì)象上的 $，并且 $ 是一個(gè)函數(shù)，它是 jQuery 的入口點(diǎn)，用于進(jìn)行各種 DOM 操作和事件處理。這可以幫助你確認(rèn) jQuery 已經(jīng)成功加載并且可以在你的項(xiàng)目中使用。

jQuery 的基本用法示例

一旦你已經(jīng)成功將 jQuery 添加到你的項(xiàng)目并在 index.html 中引入了它，你可以開(kāi)始使用 jQuery 來(lái)執(zhí)行各種常見(jiàn)的 DOM 操作、事件處理、動(dòng)畫(huà)效果等。以下是一些 jQuery 的基本用法示例：

1. DOM 操作

選擇元素
你可以使用選擇器來(lái)選取元素，并對(duì)它們進(jìn)行操作。

// 選擇元素并修改其文本內(nèi)容
$("#myElement").text("Hello, jQuery!");

修改屬性
你可以使用 jQuery 來(lái)修改元素的屬性。

// 修改元素的屬性
$("#myImage").attr("src", "new_image.jpg");

2. 事件處理

處理點(diǎn)擊事件
你可以使用 jQuery 處理事件，如點(diǎn)擊事件。

// 處理按鈕點(diǎn)擊事件
$("#myButton").click(function() {
    alert("按鈕被點(diǎn)擊了！");
});

3. 動(dòng)畫(huà)效果

淡入/淡出
jQuery 可以用于創(chuàng)建動(dòng)畫(huà)效果，如淡入和淡出。

// 淡入元素
$("#myElement").fadeIn();

// 淡出元素
$("#myElement").fadeOut();

這些只是 jQuery 的一些基本用法示例。你可以根據(jù)你的項(xiàng)目需求使用更多的 jQuery 方法，例如滑動(dòng)、縮放、隱藏、顯示、動(dòng)畫(huà)隊(duì)列等。確保在你的 JavaScript 代碼中引用了 jQuery，并根據(jù) jQuery 文檔來(lái)了解更多功能和用法。

.bat自動(dòng)初始化部署Flask-vue3項(xiàng)目

all.bat和nodejs_npm_cnpm.build.bat需要右鍵以管理員身份運(yùn)行

all_in_one.bat

• 功能：這是主要的批處理腳本，用于自動(dòng)化安裝Node.js、設(shè)置PowerShell執(zhí)行策略、安裝cnpm、創(chuàng)建Flask項(xiàng)目結(jié)構(gòu)，并運(yùn)行Vue.js前端開(kāi)發(fā)服務(wù)器。
• 用途：用于一鍵自動(dòng)化搭建Web開(kāi)發(fā)環(huán)境。
  all.bat由nodejs_npm_cnpm.build.bat和flask_config.bat合并得到
  

@echo off
chcp 65001
rem 保存當(dāng)前路徑
set "ScriptDir=%~dp0"
rem 回到項(xiàng)目目錄
cd /d "%ScriptDir%"
rem 檢查系統(tǒng)是否已安裝Node.js
node -v 2>nul
if %errorlevel%==0 (
    echo Node.js is already installed.
) else (
    echo Node.js is not installed. Downloading and installing Node.js...
    
    rem 下載Node.js安裝程序
    powershell -Command "(New-Object Net.WebClient).DownloadFile('https://npmmirror.com/mirrors/node/v18.18.0/node-v18.18.0-x64.msi', 'node-v18.18.0-x64.msi')"

    
    echo Node.js installation package downloaded, starting installation...
    
    rem 安裝Node.js
    msiexec /i node-v18.18.0-x64.msi /quiet /qn /norestart
    
    echo Node.js installation completed.
)
pause

rem 檢查并設(shè)置 PowerShell 執(zhí)行策略
powershell Get-ExecutionPolicy -Scope LocalMachine -ErrorAction SilentlyContinue | findstr /i "RemoteSigned"
if %errorlevel%==0 (
    echo PowerShell execution policy is already set to RemoteSigned.
) else (
    echo Setting PowerShell execution policy to RemoteSigned...
    powershell Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine
    echo PowerShell execution policy has been set to RemoteSigned.
)
rem 安裝 cnpm
echo Installing cnpm...
powershell npm install -g cnpm --registry=https://registry.npmmirror.com
echo cnpm installation completed.
call cnpm install -g @vue/cli
pause

echo Checking for Python installation...

rem 檢查系統(tǒng)是否已安裝Python
python --version 2>nul
if %errorlevel%==0 (
    echo Python is already installed.
) else (
    echo Python is not installed. Downloading and installing Python...
    
    rem 下載Python安裝程序
    curl -O https://mirrors.huaweicloud.com/python/3.8.0/python-3.8.0-amd64.exe
    
    echo Installation package downloaded, starting installation...
    
    rem 安裝Python
    python-3.8.0-amd64.exe /quiet InstallAllUsers=1 PrependPath=1
    
    echo Python installation completed.
)

echo Creating Flask project structure...

rem 創(chuàng)建項(xiàng)目文件夾
mkdir YourFlaskProject
cd YourFlaskProject

rem 創(chuàng)建虛擬環(huán)境
python -m venv venv

rem 激活虛擬環(huán)境
call venv\Scripts\activate

rem 安裝Flask
pip install Flask

rem 創(chuàng)建app.py文件
echo from flask import Flask > app.py
echo. >> app.py
echo app = Flask(__name__) >> app.py
echo. >> app.py
echo @app.route('/') >> app.py
echo def hello_world(): >> app.py
echo     return 'Hello, Flask!' >> app.py
echo. >> app.py
echo if __name__ == '__main__': >> app.py
echo     app.run() >> app.py



echo chcp 65001 > flask_run.bat
echo @echo off >> flask_run.bat
echo rem 進(jìn)入虛擬環(huán)境 >> flask_run.bat
echo call venv\Scripts\activate >> flask_run.bat
echo rem 確認(rèn)虛擬環(huán)境已激活后，執(zhí)行Python腳本 >> flask_run.bat
echo if ERRORLEVEL 1 ( >> flask_run.bat
echo     echo 無(wú)法激活虛擬環(huán)境 >> flask_run.bat
echo ) else ( >> flask_run.bat
echo     echo 虛擬環(huán)境已激活 >> flask_run.bat
echo     python app.py >> flask_run.bat
echo ) >> flask_run.bat
echo rem 退出虛擬環(huán)境 >> flask_run.bat
echo deactivate >> flask_run.bat

rem 創(chuàng)建static和templates目錄
mkdir static
mkdir templates




echo chcp 65001 > vue_run.bat
echo @echo off >> vue_run.bat
echo rem 運(yùn)行前端開(kāi)發(fā)服務(wù)器 >> vue_run.bat
echo call cnpm run serve >> vue_run.bat
echo rem 檢查命令執(zhí)行結(jié)果 >> vue_run.bat
echo if ERRORLEVEL 1 ( >> vue_run.bat
echo     echo 前端開(kāi)發(fā)服務(wù)器啟動(dòng)失敗 >> vue_run.bat
echo     pause >> vue_run.bat
echo ) else ( >> vue_run.bat
echo     echo 前端開(kāi)發(fā)服務(wù)器已啟動(dòng) >> vue_run.bat
echo     pause >> vue_run.bat
echo ) >> vue_run.bat

rem 創(chuàng)建vue3項(xiàng)目中
echo chcp 65001 > vue_build.bat
echo @echo off >> vue_build.bat
echo rem 運(yùn)行前端開(kāi)發(fā)服務(wù)器 >> vue_build.bat
echo call cnpm run build>> vue_build.bat
echo rem 檢查命令執(zhí)行結(jié)果 >> vue_build.bat
echo if ERRORLEVEL 1 ( >> vue_build.bat
echo     echo 前端開(kāi)發(fā)項(xiàng)目打包失敗 >> vue_build.bat
echo     pause >> vue_build.bat
echo ) else ( >> vue_build.bat
echo     echo 前端開(kāi)發(fā)項(xiàng)目打包成功 >> vue_build.bat
echo     pause >> vue_build.bat
echo ) >> vue_build.bat


rem 創(chuàng)建vue3項(xiàng)目中
echo chcp 65001 > vue_install.bat
echo call vue create vue-web >> vue_install.bat
echo rem 移動(dòng)文件 >> vue_install.bat
echo move "vue_build.bat" "vue-web" >> vue_install.bat
echo echo vue_build.bat文件已移動(dòng)到指定文件夾 >> vue_install.bat
echo move "vue_run.bat" "vue-web" >> vue_install.bat
echo echo vue_run.bat文件已移動(dòng)到指定文件夾 >> vue_install.bat
echo pause >> vue_install.bat
echo cd vue-web >> vue_install.bat
echo call cnpm install >> vue_install.bat
echo pause >> vue_install.bat



echo Flask project structure created.

echo Please run the following command to activate the virtual environment:
echo venv\Scripts\activate

vue_install.bat
pause

all.bat分解

1. nodejs_npm_cnpm.build.bat

• 功能：檢查系統(tǒng)是否已安裝Node.js，如果未安裝則下載安裝Node.js，然后安裝cnpm和@vue/cli。
• 用途：用于安裝Node.js、cnpm和Vue CLI的批處理腳本。

@echo off
chcp 65001
rem 檢查系統(tǒng)是否已安裝Node.js
node -v 2>nul
if %errorlevel%==0 (
    echo Node.js is already installed.
) else (
    echo Node.js is not installed. Downloading and installing Node.js...
    
    rem 下載Node.js安裝程序
    powershell -Command "(New-Object Net.WebClient).DownloadFile('https://npmmirror.com/mirrors/node/v18.18.0/node-v18.18.0-x64.msi', 'node-v18.18.0-x64.msi')"

    
    echo Node.js installation package downloaded, starting installation...
    
    rem 安裝Node.js
    msiexec /i node-v18.18.0-x64.msi /quiet /qn /norestart
    
    echo Node.js installation completed.
)
pause

rem 檢查并設(shè)置 PowerShell 執(zhí)行策略
powershell Get-ExecutionPolicy -Scope LocalMachine -ErrorAction SilentlyContinue | findstr /i "RemoteSigned"
if %errorlevel%==0 (
    echo PowerShell execution policy is already set to RemoteSigned.
) else (
    echo Setting PowerShell execution policy to RemoteSigned...
    powershell Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine
    echo PowerShell execution policy has been set to RemoteSigned.
)
rem 安裝 cnpm
echo Installing cnpm...
powershell npm install -g cnpm --registry=https://registry.npmmirror.com
echo cnpm installation completed.
call cnpm install -g @vue/cli
pause

2. flask_config.bat

• 功能：檢查系統(tǒng)是否已安裝Python，如果未安裝則下載安裝Python。然后創(chuàng)建Flask項(xiàng)目的文件夾、虛擬環(huán)境、安裝Flask，并創(chuàng)建Flask的基本項(xiàng)目結(jié)構(gòu)。
• 用途：用于配置Flask項(xiàng)目所需的Python環(huán)境和基本結(jié)構(gòu)的批處理腳本。

chcp 65001
@echo off
echo Checking for Python installation...

rem 檢查系統(tǒng)是否已安裝Python
python --version 2>nul
if %errorlevel%==0 (
    echo Python is already installed.
) else (
    echo Python is not installed. Downloading and installing Python...
    
    rem 下載Python安裝程序
    curl -O https://mirrors.huaweicloud.com/python/3.8.0/python-3.8.0-amd64.exe
    
    echo Installation package downloaded, starting installation...
    
    rem 安裝Python
    python-3.8.0-amd64.exe /quiet InstallAllUsers=1 PrependPath=1
    
    echo Python installation completed.
)

echo Creating Flask project structure...

rem 創(chuàng)建項(xiàng)目文件夾
mkdir YourFlaskProject
cd YourFlaskProject

rem 創(chuàng)建虛擬環(huán)境
python -m venv venv

rem 激活虛擬環(huán)境
call venv\Scripts\activate

rem 安裝Flask
pip install Flask

rem 創(chuàng)建app.py文件
echo from flask import Flask > app.py
echo. >> app.py
echo app = Flask(__name__) >> app.py
echo. >> app.py
echo @app.route('/') >> app.py
echo def hello_world(): >> app.py
echo     return 'Hello, Flask!' >> app.py
echo. >> app.py
echo if __name__ == '__main__': >> app.py
echo     app.run() >> app.py



echo chcp 65001 > flask_run.bat
echo @echo off >> flask_run.bat
echo rem 進(jìn)入虛擬環(huán)境 >> flask_run.bat
echo call venv\Scripts\activate >> flask_run.bat
echo rem 確認(rèn)虛擬環(huán)境已激活后，執(zhí)行Python腳本 >> flask_run.bat
echo if ERRORLEVEL 1 ( >> flask_run.bat
echo     echo 無(wú)法激活虛擬環(huán)境 >> flask_run.bat
echo ) else ( >> flask_run.bat
echo     echo 虛擬環(huán)境已激活 >> flask_run.bat
echo     python app.py >> flask_run.bat
echo ) >> flask_run.bat
echo rem 退出虛擬環(huán)境 >> flask_run.bat
echo deactivate >> flask_run.bat

rem 創(chuàng)建static和templates目錄
mkdir static
mkdir templates




echo chcp 65001 > vue_run.bat
echo @echo off >> vue_run.bat
echo rem 運(yùn)行前端開(kāi)發(fā)服務(wù)器 >> vue_run.bat
echo call cnpm run serve >> vue_run.bat
echo rem 檢查命令執(zhí)行結(jié)果 >> vue_run.bat
echo if ERRORLEVEL 1 ( >> vue_run.bat
echo     echo 前端開(kāi)發(fā)服務(wù)器啟動(dòng)失敗 >> vue_run.bat
echo     pause >> vue_run.bat
echo ) else ( >> vue_run.bat
echo     echo 前端開(kāi)發(fā)服務(wù)器已啟動(dòng) >> vue_run.bat
echo     pause >> vue_run.bat
echo ) >> vue_run.bat

rem 創(chuàng)建vue3項(xiàng)目中
echo chcp 65001 > vue_build.bat
echo @echo off >> vue_build.bat
echo rem 運(yùn)行前端開(kāi)發(fā)服務(wù)器 >> vue_build.bat
echo call cnpm run build>> vue_build.bat
echo rem 檢查命令執(zhí)行結(jié)果 >> vue_build.bat
echo if ERRORLEVEL 1 ( >> vue_build.bat
echo     echo 前端開(kāi)發(fā)項(xiàng)目打包失敗 >> vue_build.bat
echo     pause >> vue_build.bat
echo ) else ( >> vue_build.bat
echo     echo 前端開(kāi)發(fā)項(xiàng)目打包成功 >> vue_build.bat
echo     pause >> vue_build.bat
echo ) >> vue_build.bat


rem 創(chuàng)建vue3項(xiàng)目中
echo chcp 65001 > vue_install.bat
echo call vue create vue-web >> vue_install.bat
echo rem 移動(dòng)文件 >> vue_install.bat
echo move "vue_build.bat" "vue-web" >> vue_install.bat
echo echo vue_build.bat文件已移動(dòng)到指定文件夾 >> vue_install.bat
echo move "vue_run.bat" "vue-web" >> vue_install.bat
echo echo vue_run.bat文件已移動(dòng)到指定文件夾 >> vue_install.bat
echo pause >> vue_install.bat
echo cd vue-web >> vue_install.bat
echo call cnpm install >> vue_install.bat
echo pause >> vue_install.bat



echo Flask project structure created.

echo Please run the following command to activate the virtual environment:
echo venv\Scripts\activate
vue_install.bat
pause

3. flask_run.bat

• 功能：進(jìn)入Flask項(xiàng)目的虛擬環(huán)境，運(yùn)行Flask應(yīng)用，然后退出虛擬環(huán)境。
• 用途：用于啟動(dòng)Flask應(yīng)用的批處理腳本。

chcp 65001
@echo off
rem 進(jìn)入虛擬環(huán)境
call venv\Scripts\activate

rem 確認(rèn)虛擬環(huán)境已激活后，執(zhí)行Python腳本
if ERRORLEVEL 1 (
    echo 無(wú)法激活虛擬環(huán)境
) else (
    echo 虛擬環(huán)境已激活
    python app.py
)

rem 退出虛擬環(huán)境
deactivate

4. vue_install.bat

• 功能：創(chuàng)建Vue.js項(xiàng)目，并將vue_build.bat和vue_run.bat文件移動(dòng)到Vue.js項(xiàng)目目錄中，然后在Vue.js項(xiàng)目中安裝依賴(lài)。
• 用途：用于創(chuàng)建和配置Vue.js項(xiàng)目的批處理腳本。

chcp 65001 
call vue create vue-web 
rem 移動(dòng)文件 
move "vue_build.bat" "vue-web" 
echo vue_build.bat文件已移動(dòng)到指定文件夾 
move "vue_run.bat" "vue-web" 
echo vue_run.bat文件已移動(dòng)到指定文件夾 
pause 
cd vue-web 
call cnpm install 
pause 

5. vue_build.bat

• 功能：檢查系統(tǒng)是否已安裝Node.js，如果未安裝則下載安裝Node.js，然后安裝cnpm和@vue/cli。
• 用途：用于安裝Node.js、cnpm和Vue CLI的批處理腳本。

chcp 65001 
@echo off 
rem 運(yùn)行前端開(kāi)發(fā)服務(wù)器 
call cnpm run build
rem 檢查命令執(zhí)行結(jié)果 
if ERRORLEVEL 1 ( 
    echo 前端開(kāi)發(fā)項(xiàng)目打包失敗 
    pause 
) else ( 
    echo 前端開(kāi)發(fā)項(xiàng)目打包成功 
    pause 
) 

6. vue_run.bat

• 功能：運(yùn)行Vue.js前端開(kāi)發(fā)服務(wù)器。
• 用途：用于啟動(dòng)Vue.js前端開(kāi)發(fā)服務(wù)器的批處理腳本。

chcp 65001 
@echo off 
rem 運(yùn)行前端開(kāi)發(fā)服務(wù)器 
call cnpm run serve 
rem 檢查命令執(zhí)行結(jié)果 
if ERRORLEVEL 1 ( 
    echo 前端開(kāi)發(fā)服務(wù)器啟動(dòng)失敗 
    pause 
) else ( 
    echo 前端開(kāi)發(fā)服務(wù)器已啟動(dòng) 
    pause 
) 

以上每個(gè)批處理腳本都有其特定的功能和用途，可以根據(jù)需要選擇性地運(yùn)行它們來(lái)配置和啟動(dòng)你的Web開(kāi)發(fā)環(huán)境。

常用python鏡像源

### 阿里

pip install -i http://mirrors.aliyun.com/pypi/simple/

### 豆瓣

pip install -i http://pypi.douban.com/simple/

### 清華大學(xué)

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple  bar_chart_race_cn

### 華中理工大學(xué)

pip install -i http://pypi.hustunique.com/simple/

### 山東理工大學(xué)

pip install -i http://pypi.sdutlinux.org/simple/

### 中國(guó)科學(xué)技術(shù)大學(xué)

pip install -i http://pypi.mirrors.ustc.edu.cn/simple/

npm,yarn淘寶鏡像源

當(dāng)自動(dòng)配置淘寶鏡像源是一項(xiàng)常見(jiàn)任務(wù)，特別是對(duì)于在中國(guó)大陸使用 npm 和 Yarn 的開(kāi)發(fā)者來(lái)說(shuō)。淘寶鏡像源提高了下載速度和穩(wěn)定性，使包管理更加高效。以下是一組命令和相關(guān)介紹，用于配置 npm 和 Yarn 鏡像源，并持久化配置信息。

配置 npm 鏡像源：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/

• npm config set registry https://registry.npm.taobao.org：將 npm 的注冊(cè)表源設(shè)置為淘寶鏡像源，以提高 npm 包的下載速度。

• npm config set disturl https://npm.taobao.org/dist：將 npm 的二進(jìn)制分發(fā)源設(shè)置為淘寶鏡像源，以加速二進(jìn)制文件的下載。

• npm config set electron_mirror https://npm.taobao.org/mirrors/electron/：將 Electron 的下載鏡像設(shè)置為淘寶鏡像源，用于加速 Electron 相關(guān)的包的下載。

• npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/：將 node-sass 的二進(jìn)制鏡像設(shè)置為淘寶鏡像源，以提高 node-sass 包的下載速度。

• npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/：將 PhantomJS 的 CDN 鏡像源設(shè)置為淘寶鏡像源，以提高 PhantomJS 包的下載速度。

配置 Yarn 鏡像源：

yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g

• yarn config set registry https://registry.npm.taobao.org -g：將 Yarn 的注冊(cè)表源設(shè)置為淘寶鏡像源，并應(yīng)用于全局配置。

• yarn config set disturl https://npm.taobao.org/dist -g：將 Yarn 的二進(jìn)制分發(fā)源設(shè)置為淘寶鏡像源，并應(yīng)用于全局配置。

• yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g：將 Electron 的下載鏡像設(shè)置為淘寶鏡像源，并應(yīng)用于全局配置。

• yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g：將 node-sass 的二進(jìn)制鏡像設(shè)置為淘寶鏡像源，并應(yīng)用于全局配置。

• yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g：將 PhantomJS 的 CDN 鏡像源設(shè)置為淘寶鏡像源，并應(yīng)用于全局配置。

這些命令可以加速 npm 和 Yarn 包的下載，特別是對(duì)于在中國(guó)大陸使用這些工具的開(kāi)發(fā)者來(lái)說(shuō)。此外，你可以將這些配置信息持久化到特定文件中，以便將來(lái)的使用，這些信息將保存在用戶目錄下的 .npmrc 和 .yarnrc 文件中。這些操作能夠極大地改善開(kāi)發(fā)流程，使包管理更加高效。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-723895.html

參考資料

• Flask-CORS
• 使用 Flask 和 vue-cli 腳手架，開(kāi)發(fā) vue3.x 版本的 Python Web 項(xiàng)目
• VS Code上搭建Vue開(kāi)發(fā)環(huán)境超詳細(xì)教程
  
• yarn npm 淘寶鏡像
  
• 使用tree-node-cli 自動(dòng)生成目錄樹(shù)結(jié)構(gòu)

到了這里，關(guān)于【Vue3-Flask-BS架構(gòu)Web應(yīng)用】實(shí)踐筆記1-使用一個(gè)bat腳本自動(dòng)化完整部署環(huán)境的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！