vue+vue-router+axios+element-ui構建vue實戰項目之二（nodejs、vue-cli等環境安裝）

在上一篇《vue+vue-router+axios+element-ui構建vue實戰項目之一（基礎知識篇）》中，我簡要的說明了一下前端開發目前的趨勢，以及爲何選擇vue框架等等狀況。

接下來本篇文章，咱們來了解下vue項目開始前，開發環境的搭建（windows環境）。

話很少說，開始咯。

安裝 nodejs 環境

之前看到的nodejs 的安裝方案，大多都是使用終端各類命令，太費事。明明有更簡便的方式幹嗎不用呢？今天就介紹傻瓜式的安裝方案。 

 nodejs 官方網站下載安裝包： https://nodejs.org/，而後進行安裝。

在安裝好了 nodejs 以後，咱們在終端中輸入如下兩個命令：

若是可以正確顯示版本號，證實咱們的nodejs安裝成功。

安裝 vue-cli 腳手架工具

在終端輸入：

npm install vue-cli -g 

簡單的介紹下：

1. npm 是 nodejs 的官方包管理器。能夠簡單的理解爲，用這個來管理全部的依賴包（雖然不單單是如此）。
2. install 命令表示執行安裝操做（uninstall、update等）。
3. -g 是命令參數，表明，這個包將安裝爲系統全局的包（就是說，在任何地方均可以用這個包）。
4. vue-cli 是咱們要安裝的包。

安裝完成後，終端輸入：

注意：vue -V中，V是大寫的。

也能夠輸入vue，查看相關信息，好比

基本的環境搭建完成了，接下來，咱們正式建立一個vue項目

用 vue-cli 構建一個項目

首先，跳轉到準備放項目的文件夾，而後shift+鼠標右鍵，選擇‘在此處打開命令窗口’，在終端輸入：

vue init webpack my-vue-project

vue就是咱們剛剛安裝的vue-cli腳手架的命令，init是初始化一個以webpack爲模版、名字叫my-vue-project的項目（固然，init不止支持webpack模版，還有其餘，請移步github查看更多vuejs-templates相關信息）。

當你輸入命令後，按回車鍵，終端會提示你信息，若是不想設置，咱們只需一直按回車便可。

不過，我仍是要介紹一下里面提示的信息。

1 ? Project name (my-vue-project)  --項目名稱，若是不想改，直接回車

2 ? Project description(A Vue.js project)  --項目描述，若是不想改，直接回車

3 ? Author (24439...)  --項目做者，若是不想改，直接回車

4 ? Vue build (Use arrow keys) --是否須要安裝編譯器，咱們選擇安裝，直接回車

5 ? Install vue-router (Y/n)  --是否須要安裝vue-router路由管理，咱們選擇安裝，直接回車

6 ? Use ESLint to lint your code? (Y/n)  --安裝eslint檢查語法，我選擇不安裝，按n，再按回車（若是安裝，按回車）

7 ? Setup unit tests? (Y/n) --安裝單元測試，我選擇不安裝，按n，再按回車

8 ? Setup e2e tests with Nightwatch? (Y/n) --仍是關於測試，我選擇不安裝，按n，再按回車

全部操做完成後，獲得以下圖示結果，項目基礎配置成功，接下來就是安裝中

安裝須要聯網，若是npm被牆，請使用cnpm安裝

安裝方法：

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

更多信息，請移步cnpm官網。

項目安裝完成，如圖：

按照提示，咱們終端輸入：

cd my-vue-project 

npm run dev

如圖項目啓動成功，咱們在瀏覽器輸入 http://localhost:8080 ，訪問成功：

好了，咱們nodejs和vue-cli工具已經順利安裝，而且成功搭建了一個vue項目。

下一篇，我將介紹這個init vue項目的基本信息。

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！