Wei 技術分享

一、介紹 Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。 二、建置新專案 建立新資料夾 開啟 命令提示字元 切換至 新建立的資料夾 下指令 vue create test 建立 vue 專案 專案名稱 只能是小寫英文、底線、 vue create 專案名稱 選擇 Default 剛建立好的 test 專案 三、啟動新專案 切換至 新建置的專案 下指令 yarn serve yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 四、打包新專案 切換至 新建置的專案 選擇 public 、 src 、 babel.config.js 、 package.json 、 README.md 後，加壓縮檔案 此檔案即可傳送給其他人使用 五、安裝 打包好的新專案 解壓縮檔案 開啟 命令提示字元 切換至 解壓縮檔案的位置 執行指令 yarn install 安裝相關的套件 yarn install 執行指令 yarn serve 運行專案 yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 六、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 七、參考 安裝 node.js v14.15.1 yarn node.js vue cli

一、介紹 Visual Studio Code 是微軟開發且跨平台的原始碼編輯器。 二、 安裝 進入 「官網」 ，點擊 Download 安裝 下載的檔案 選 我同意 ，再按 下一步 選 建立桌面圖示 ，再按 下一步 按 安裝 安裝中 按 完成 三、擴充套件安裝       1. 按 紅色框起來的 extions 圖示       2. 搜尋 HTML ，安裝 HTML Snippets       3.  安裝 HTML Preview       4.  搜尋 Vetur ，安裝 Vetur 四、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 五、參考連結 Visual Studio Code

一、介紹 Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。 二、安裝 Vue CLI 安裝需透過 npm 或 yarn 套件管理工具來安裝，筆者會一同介紹 node.js 、 yarn 的安裝。 安裝步驟如下 node.js ( 會一同安裝 npm ) yarn ( 透過 npm 安裝 ) vue cli ( 透過 yarn 安裝 ) node.js 安裝 筆者使用環境為 windows 10 、 node.js(14.15.1) ，因此筆者會介紹在 windows 10 安裝 v14.15.1 ，詳細安裝可參考 文章 進入 https://nodejs.org/download/release/v14.15.1/ 依據作業系統選擇不同版本 依照 作業系統 建議選擇 IOS 選擇 副檔名為 pkg 的檔案 Windows 選擇 副檔名為 msi 的檔案 依照 CPU 位元 建議選擇 64位元 選 x64 32位元 選 x86 安裝 node.js (一同安裝 npm ) 開起 cmd 下指令 node -v 、 node -v 檢查是否安裝成功 yarn 安裝 快速安裝套件的管理工具 yarn ，詳細參考 文章 開起 cmd 下指令，即可安裝 yarn npm install --global yarn 重開 cmd 下指令 yarn -v 檢查是否安裝成功 vue cli 安裝 安裝好 node.js 、 npm 、 yarn 後，就可以安裝 Vue Cli 開起 cmd 下指令，即可安裝 Vue Cli yarn global add @vue/cli 重開 cmd 下指令 vue --version 檢查是否安裝成功 三、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaS