快速上手VUE：創建、運行、發佈，HelloWorld

一、創建VUE項目

        1、打開VS“創建新項目”界面，選擇“基於 Vue.js Web 應用程式”。

                分為Javascript和TypeScript兩種，註意按自己的編程語言掌握情況選擇用哪種。（TypeScript是Javascript的超集，相容Javascript所有語法，不過由於我還未寫過TypeScript，穩妥考慮，先選Javascript。）

        2、填寫項目名稱和地址。

        3、打開“\src\App.vue”文件，發現連“Hello World!”都已經幫我們寫好了，直接開始運行出來看看吧。

二、運行

        1、按下win+r，並輸入cmd。

        2、使用“盤符:”與“cd 文件夾名”進入項目根目錄。

 E:
 cd /其它/VuejsApp1

        3、輸入以下命令，等待運行結束即可。（如果報錯，繼續往下看；註意網頁不是自動打開的，需要自己手動複製網址，在瀏覽器中打開。）

 set NODE_OPTIONS=--openssl-legacy-provider
 npm run serve

三、發佈

        輸入以下命令，等待運行結束即可（打包結果在項目根目錄的dist文件夾內；如果報錯，繼續往下看）。

 set NODE_OPTIONS=--openssl-legacy-provider
 npm run build

四、運行和發佈中的報錯解決

        目前遇到的錯誤為兩種：

                1、模塊或依賴缺失，建議直接運行下麵命令自動檢測與安裝。

npm i

                2、Error: error:0308010C:digital envelope routines::unsupported，在執行命令前先輸入以下命令（例如：set NODE_OPTIONS=--openssl-legacy-provider && npm run serve）。

Linux & Mac OS (windows git bash)
    export NODE_OPTIONS=--openssl-legacy-provider
windows命令提示符:
    set NODE_OPTIONS=--openssl-legacy-provider

                        出現這個錯誤是因為Node.js V17+中的OpenSSL3.0對允許演算法和密鑰大小增加了嚴格的限制。

五、BAT執行

        為了方便，也可在項目根目錄創建BAT文件執行命令：

::快捷調試.BAT

::本BAT必須放置於項目文件夾里，例如項目VuejsApp1的文件夾：E:\其它\VuejsApp1

@echo off

echo.
echo node.js V17+版本中的OpenSSL3.0對允許演算法和密鑰大小增加了嚴格的限制，可能會對生態系統造成一些影響，需要做以下設置：
echo     Linux
echo     Mac OS (windows git bash)：
echo         export NODE_OPTIONS=--openssl-legacy-provider
echo     Windows命令提示符：
echo         set NODE_OPTIONS=--openssl-legacy-provider

echo.
echo 查看 Node.js 版本號：
echo     node -v

echo.
echo 查看 JavaScript包管理工具 版本號：
echo     npm -v

echo.
echo 開發環境調試用指令，能夠在修改頁面後自動刷新同步網頁：
echo     npm run serve

echo.
echo 開發環境發佈用指令（打包後的文件夾為dist，在項目根目錄）：
echo     npm run build

::執行
start cmd /k "set NODE_OPTIONS=--openssl-legacy-provider && echo. && echo set NODE_OPTIONS=--openssl-legacy-provider 設置成功 && echo. && echo node -v && node -v && echo. && echo npm -v && npm -v && npm run serve"

echo.
echo （當前視窗可關閉）

::pause

::快捷發佈.BAT

::本BAT必須放置於項目文件夾里，例如項目VuejsApp1的文件夾：E:\其它\VuejsApp1

@echo off

echo.
echo node.js V17+版本中的OpenSSL3.0對允許演算法和密鑰大小增加了嚴格的限制，可能會對生態系統造成一些影響，需要做以下設置：
echo     Linux
echo     Mac OS (windows git bash)：
echo         export NODE_OPTIONS=--openssl-legacy-provider
echo     Windows命令提示符：
echo         set NODE_OPTIONS=--openssl-legacy-provider

echo.
echo 查看 Node.js 版本號：
echo     node -v

echo.
echo 查看 JavaScript包管理工具 版本號：
echo     npm -v

echo.
echo 開發環境調試用指令，能夠在修改頁面後自動刷新同步網頁：
echo     npm run serve

echo.
echo 開發環境發佈用指令（打包後的文件夾為dist，在項目根目錄）：
echo     npm run build

::執行
start cmd /k "set NODE_OPTIONS=--openssl-legacy-provider && echo. && echo set NODE_OPTIONS=--openssl-legacy-provider 設置成功 && echo. && echo node -v && node -v && echo. && echo npm -v && npm -v && npm run build"

echo.
echo （當前視窗可關閉）

::pause

六、進一步瞭解VUE，給進行編程做準備

        VUE介紹

        VUE API