【Vue】安裝


Posted by LilyLiu on 2021-08-04

前言

目前主流的前端框架有三者,React、Angular、Vue,會想選擇Vue的原因是Vue為這三者之中最易學習的框架,剛出社會時算是全端開發者的我,那時沒什麼框架的概念,殊不知一接觸後,滿是後悔沒早點學習框架。後續將會有關於Vue的一系列的文章,想紀錄一下學習筆記,本文先來分享Vue的安裝。

Windows 10 Vue安裝

官網上有說明安裝方法。

  1. 獨立版本
    至官網下載檔案放置在專案中,並用引入,有分開發及產品版本。

  2. CDN引入
    可至cdnjsjsdelivr搜尋,若是不知道使用哪個,可直接引入官網上的CDN。

  3. NPM
    先安裝Node.js,安裝完成後,用檢視版本指令來查看是否成功。

    $ node -v
    

    使用node套件管理(npm)來安裝vue及vue-cli,vue沒有包含vue相關指令的,因此還需要安裝vue-cli工具來提高開發效率,而vue-cli是vue.js提供給開發者能夠快速使用vue指令操作的工具。

    $ npm install vue
    #全局安裝
    $ npm install -g vue-cli
    

    全局安裝vue-cli後,往後要新增vue專案都不需要再安裝即可使用vue相關指令,此時請注意畫面是否有出現vue-init相關的路徑,可以先把路徑記下來後續會提到用途。

    $ vue -V
    

    要確認是否有安裝成功可使用檢視版本的指令來查看。
    在這裡遇到了一個問題,vue: command not found,查了一下發現是環境變數沒設定的關係,到"控制台->系統及安全性->系統->進階系統設定->環境變數"中的Path新增,路徑為全局安裝vue-cli的地方,即為在上面提到的vue-init路徑,新增完後就可以使用vue指令了。

    C:\Users\ASUS\AppData\Roaming\npm
    

    開始建立專案

    $ vue create project_name
    $ cd project_name
    $ npm install
    #建置
    $ npm run build
    #啟動
    $ npm run serve
    


    新增專案時會有三種可選,前兩者為預設,第三個選項為自行選擇要安裝的項目,詳細可到官網上查看,在這裡我選擇第一個安裝,完成後需先安裝相關套件再啟動,到localhost:8080(預設是8080)查看有畫面就完成了。

總結

以上是安裝vue的過程以及遇到環境變數尚未設定的解決辦法。


#Vue







Related Posts

TypeScript 筆記:unknown 簡介

TypeScript 筆記:unknown 簡介

[筆記] Jest

[筆記] Jest

JavaScript陣列&物件

JavaScript陣列&物件


Comments