從零開始的Vue 日記 — 環境安裝

莊創偉
3 min readJul 31, 2019

--

雖然使用VS開一個JS文檔也是可以使用Vue,但工欲善其事,必先利其器。

尤其前端的池子這麼深,沒抓幾個好套件來用也太苦逼了。

所以首先先來下載強大的VSCODE

VSCODE是微軟開發的前端開發工具,有許多好用的套件可以下載。

輸入code ..可在該目錄下打開VSCODE

打開VSCODE第一件事就是下載繁體語言包

繁體中文裝起來~~

接著安裝 用相同的方式 npm 或至node.js官網下載node.js來安裝。

安裝完成後,在cmd輸入npm -v 會出現目前的版號,表示已經安裝完成。

接著輸入npm init 來建立專案

建立專案時會詢問一些基本設定

專案建立時,會詢問一些設定

package name   ==>專案名稱
version ==>版本號
description ==>專案說明
entry point ==>專案進入點
test command ==>執行npm run test 時的指令集
git repository ==>放到git上的關鍵字
keywords ==>該專案的關鍵字
author ==>作者
license ==>版權宣告

當這些當輸入完成後npm會自動生成一個package.json的設定檔與node_modules的資料夾在專案目錄中。

package.json的內文

也可以輸入npm init -y 採用全部預設跳過初始設定。

之後要裝套件打包軟體webpack ,於終端機中輸入

npm install webpack --save-dev*install 可用i表示
*--save-dev 表示寫入package.json 中的 "devDependencies"(開發環境) ,如果沒加則不會再package.json中寫入
*--save 表示寫入package.json 中的"dependencies"(布版環境)

之後會自動裝,完成會package.json會多一段

"devDependencies": {"webpack": "^4.38.0"}

表示安裝完成了。

接下來由於沒有後端可以運行網站,所以還得安裝一個後端框架來跑網站(有沒有這麼多東西要裝…) 。

一樣輸入npm i — save-dev Express 進行安裝。

安裝完這些基本套件後,終於可以開始寫CODE了~~~

其他當然還有很多實用的特件,像是ESLite,或者是直接安裝vue cli 直接下載程式模板等等。

--

--

莊創偉

學海無涯。但是為了生計還是得下海的風塵男子