vue入門(安裝環境與搭建專案)

hahadelphi發表於2021-09-09

 前言   

        最近一同事專案上需要用到vue技術,對於完全沒有學過,只是對vue充滿好奇的路上,在目前結束專案且比較閒的今天,入手學習了下vue。先從安裝環境與搭建專案開始。為下一個專案做準備!

        網際網路這一行業,一旦沒有專案也就意味著離離職不遠了,所以保持點危機感,對於未知的前方也許碰到了這項技術,你可以說正好我會,正好我熟悉,正好我精通。機會總是留給有準備的人,不是嘛~

        【寫這篇文章時,我對 vue.js的瞭解,只限於用來做移動端,是一個框架。】

入坑路線如下:

第一步:先了解官方文件,看自己是否適合學習

第二步:百度查詢有關搭建vue專案的方法(自學的情況下),有技術人員在,這篇文章你可以翻篇兒啦。像我一樣自學可以跟著我的步驟走,也可以跟著我參考文章的步驟走。

這裡附上兩篇我的參考文章,這裡是兩種方法,任選一就好,我太笨了,果斷的將兩篇給結合了,花了很多時間。


今天在安裝的過程裡,截了不少圖,所以想整理一下,做一個記錄,以後說不定也能用上。

安裝環境:

在官網裡下載安裝包(左邊為穩定版,右邊為最新版,建議用谷歌瀏覽器下載,這個過程中用360與火狐瀏覽器下載都失敗了)

圖片描述

下載穩定版node.js

下載後一路next,安裝成功後,執行cmd命令(window鍵+R輸入cmd回車),在cmd輸入命令 node -v,回車 及 npm -v,回車,如果出現下面的版本資訊則表示安裝成功。我是穩定版本,所以為V8.11.3。(如果是最新版本,則為v10.8.0),這裡npm在安裝node.js時系統自帶。

圖片描述

檢測是否成功安裝

構建vue專案

1.全域性安裝(這個過程裡輸入命令點選回車後,需要等待一會,等載入後出現下一行命令再進行輸入)

1、輸入:npm install -g vue-cli 回車

圖片描述

全域性安裝vue-cli

2、輸入:npm config set registry )  回車【如果使用csdn,執行2、3,不使用可以跳過本步驟】

圖片描述

安裝淘寶映象

3、輸入:cnpm install node-sass  --save (使用淘寶映象安裝node-sass)回車

      輸入:cnpm install node-sass --save-dev   回車

      輸入:cnpm install sass-loader --save-dev  回車

圖片描述

安裝save-dev

2.建立專案

下面是對專案名稱的解釋,來自簡書作者一岑不冉

圖片描述

來自            一岑不冉 對各種名字的解釋

1、輸入:vue init wepack my-project   回車(依次建立自己的專案名稱,以下的是直接建立到c盤。)

圖片描述

將內容建立到C盤裡

輸入:cd my-project   回車

圖片描述

npm安裝

輸入:npm dev   回車跑起來

圖片描述

8080表示ok

在瀏覽器輸入:  執行

圖片描述

成功



作者:耳耳日記
連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2471/viewspace-2817316/,如需轉載,請註明出處,否則將追究法律責任。

相關文章