寫在前面

本文主要給剛剛接觸前端或者vue.js的同學，旨在可以通過本文能夠順利運行起一個vue工程！

零、環境搭建

首先安裝node及npm（已經安裝過的自動跳過），打開node官網：

不管是windows還是mac，是英文還是中文，都差不多一個樣。
LTS是穩定版，另一個是最新版，區別就是新版的可能有一些新的功能，但可能不太穩定，隨便點一個就可以（不過我都是裝最新版?）。

接著點擊右邊的最新版，就會下載一個安裝包，接著找到下載位置點擊安裝。

沒下載成功應該是網絡問題，重新下載就好了。

另外，安裝node時會自動安裝npm，所以暫時不需要再手動安裝npm，接著就是傻瓜式操作，一路點擊“繼續”、“同意”和“安裝”之類的按鈕，然后會提示安裝成功。

我們也可以不去管這個提示（或者沒有提示的），最后只要用命令行測試一下就知道是否安裝成功：

node -v npm -v

如果得到下面的結果就說明安裝成功了：

至此，node環境已經搭建完畢！

到這一步也很簡單，暫不需要手動配置環境變量之類的東西。

一、安裝腳手架——vue-cli

為了避免從零構建整個項目所浪費的成本，vue官方提供了一個直接生成基礎工程的腳手架——vue-cli，對初學者上手也比較快，接著安裝腳手架工具：

npm install -g @vue/cli # OR yarn global add @vue/cli

安裝成功大概是這樣（類似+ @vue/cli@3.0.4就是安裝成功了）：

yarn跟npm一樣，也是一個包管理工具，直接使用yarn報錯的話，可以先安裝一下，官網提供的安裝方法。

如果覺得npm速度慢的話可以將改成國內的淘寶npm鏡像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后就可以使用cnpm install進行相關依賴的安裝（不過一般我是不用cnpm的）。

二、初始化工程

在vue-cli3.0開始，提供了一個圖形化的界面，相比之前的命令行初始化更加直觀，操作更方便，在工程啟動后的數據分析以及狀態管理也更加清楚。

如果上面步驟都沒有問題，運行這個命令在本地啟動8000端口并自動打開瀏覽器：

vue ui

瀏覽器打開的效果是這樣的：

接著依次點擊“創建”—>“在此創建新項目”，然后出現基礎信息配置頁面：

接著在“項目文件夾”的輸入框下面輸入項目名（如：my-app），然后點擊“下一步”，到如下界面：

然后點擊“創建項目”，接著就是一段等待時間，用于創建自動創建項目以及安裝相關依賴。

這里可以先選擇默認的，因為后續都是可以修改的。

成功之后就會看到這個界面：

接著如下圖，依次點擊“任務”->“serve”->“運行”：

大概幾秒的時間就會啟動成功，右側面板會變成大概這樣，會顯示本次編譯的一下信息：

如果上面的面板提示“編譯成功”或者“success”等類似狀態就表示項目啟動成功，接著就可以用瀏覽器打開http://localhost:8080:

三、修改項目

項目創建成功，接著如果修改呢？
在初始化工程的時候會有文件夾的路徑，在自己的文件夾下好到對應的文件夾，例如我的叫my-app：

接著就直接通過編輯器打開文件夾，然后找到對應的文件進行修改、保存即可。

寫在后面

本文沒什么代碼，只是想對剛接觸前端及vue.js的一個基本指南，代碼也不同步到github上了；
對細節、原理以及vue.js語法不做詳細說明，只想能順利的跑起來一個vue.js的Hello World!

總結

以上是生活随笔為你收集整理的第一个vue.js项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。