搭建Vue2.0腳手架(vue-cli)

struggle_LZ發表於2018-05-21

            一:最簡單的壞境搭建開始:

1、安裝node.js,從node.js官網下載並安裝node,安裝過程很簡單,一路“下一步”就可以了(傻瓜式安裝)。安裝完成之後,開啟命令列工具(win+r,然後輸入cmd),輸入 node -v,如下圖,如果出現相應的版本號,則說明安裝成功。

                 搭建Vue2.0腳手架(vue-cli)

這裡需要說明下,因為在官網下載安裝node.js後,就已經自帶npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免對後續產生影響。

2、安裝淘寶映象,開啟命令列工具,把這個(npm install -g cnpm --registry= registry.npm.taobao.org)複製(這裡要手動複製就是用滑鼠右鍵那個,具體為啥不多解釋),安裝這裡是因為我們用的npm的伺服器是外國,有的時候我們安裝“依賴”的時候很很慢很慢超級慢,所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之後輸入 cnpm -v,如下圖,如果出現相應的版本號,則說明安裝成功。

搭建Vue2.0腳手架(vue-cli)

3、安裝webpack,開啟命令列工具輸入:npm install webpack -g,安裝完成之後輸入 webpack -v,如下圖,如果出現相應的版本號,則說明安裝成功。

搭建Vue2.0腳手架(vue-cli)

4、安裝vue-cli腳手架構建工具,開啟命令列工具輸入:npm install vue-cli -g,安裝完成之後輸入 vue -V(注意這裡是大寫的“V”),如下圖,如果出現相應的版本號,則說明安裝成功。

搭建Vue2.0腳手架(vue-cli)

二、通過以上四步,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建專案

  1. 在硬碟上找一個資料夾放工程用的。這裡有兩種方式指定到相關目錄:①cd 目錄路徑 ②如果以安裝git的,在相關目錄右鍵選擇Git Bash Here
  2. 安裝vue腳手架輸入:vue init webpack exprice ,注意這裡的“exprice” 是專案的名稱可以說是隨便的起名,但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裡說明將要建立一個vue 2.x版本的專案
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------專案名稱
? Project name exprice
? Project description (A Vue.js project) ---------------------專案描述
? Project description A Vue.js project
? Author Datura --------------------- 專案建立者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由,也就是以後是spa(但頁面應用需要的模組)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規則,這裡個人建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 這裡說明如何啟動這個服務
cd exprice
npm install
npm run dev
如下圖:

搭建Vue2.0腳手架(vue-cli)

3、cd 命令進入建立的工程目錄,首先cd exprice(這裡是自己建工程的名字);

4、安裝專案依賴:npm install,因為自動構建過程中已存在package.json檔案,所以這裡直接安裝依賴就行。不要從國內映象cnpm安裝(會導致後面缺了很多依賴庫),但是但是如果真的安裝“個把”小時也沒成功那就用:cnpm install 吧

5、安裝 vue 路由模組 vue-router 和網路請求模組 vue-resource,輸入:cnpm install vue-router vue-resource --save。


                               建立完成的“exprice”目錄如下:


搭建Vue2.0腳手架(vue-cli)

      簡單的說明下各個目錄都是幹嘛的:

搭建Vue2.0腳手架(vue-cli)

6、啟動專案,輸入:npm run dev。服務啟動成功後瀏覽器會預設開啟一個“歡迎頁面”,如下圖:

搭建Vue2.0腳手架(vue-cli)

相關文章