搭建vue項目環境

前言

在開發本項目以前，我對vue，react，angular等框架了解，僅限於知道它們是什麼框架，他們的核心是什麼，可是並無實際使用過（angular 1.0版本用過，由於太難用，因此對這類框架都有點陰影...）。
這是我第一次使用vue開發項目，在項目開始前1周，我纔開始看vue的官方文檔。我在安裝vue.js並搭建vue項目的過程當中遇到了各類各樣的問題，並經過百度mother找到了許多不一樣的解決方法。
當時看了衆多的博文，感受寫的並不詳細，有些還有點亂，因此想寫一個比較完善的博文，既做爲項目經驗的總結，也但願能幫助剛入vue的小夥伴。

安裝node環境

關於如何安裝node環境，請查看 windows系統下安裝 node.js (node.js安裝及環境配置)

安裝webpack

1. 打開命令行工具
   npm install webpack -g（-g表示全局安裝）
2. 檢查是否安裝成功：
   webpack -h/v
   安裝成功會出現版本信息，以下圖所示
   

安裝vue-cli 腳手架構建工具

1. 打開命令行工具
   npm install vue-cli -g（-g表示全局安裝）
2. 檢查是否安裝成功：
   vue -V
   安裝成功會出現版本信息，以下圖所示
   

構建項目

1. 在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄：①cd 目錄路徑 ②若是以安裝git的，在相關目錄右鍵選擇Git Bash Here
2. 安裝vue腳手架輸入：
   vue init webpack myProject
   注意這裏的「myProject」 是項目的名稱（能夠隨便起名字，可是不能是中文）。

vue init webpack myProject    ---------------- 這個是那個安裝vue腳手架的命令
? Project name (myProject)    ---------------- 項目名稱
? Project description (A Vue.js project)     ----------------項目描述
? Author  authorName       ---------------- 項目建立者
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)  y    ----------------  是否安裝Vue路由，也就是之後是spa（單頁面應用須要的模塊，要用輸入y，不用輸入n，能夠在用的時候再安裝）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n   ---------------- 是否啓用eslint檢測規則（eslint是一個代碼語法規範檢查的工具，選擇no就不會把語法規範功能加進webpack編譯的流程裏。建議選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) y       ----------------  是否啓用單元測試
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "myProject".
To get started:     ---------------- 這裏說明如何啓動這個服務
    cd exprice        ---------------- 進入項目文件夾
    npm install      ---------------- 下載依賴
    npm run dev   ----------------  啓動項目

1. 進入項目文件夾
   cd myProject
2. 安裝項目依賴：
   npm install

• 由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。
• 若是安裝依賴時間太長或者安裝依賴老是失敗的話，建議使用淘寶鏡像安裝。
• 安裝淘寶鏡像
  npm install -g cnpm --registry="https://registry.npm.taobao.org"
• 安裝好淘寶鏡像後就可使用cnpm代替npm（聽說淘寶鏡像會缺失一些依賴庫，能夠先用淘寶下載依賴，若是下載完有缺失庫的話，再用npm下載缺失的庫就好了）
• 如下是安裝完依賴後的截圖：
  
• 安裝項目須要的依賴

npm install --save-dev normalize.css
npm install --save-dev element-ui -S    安裝element-UI，實際這樣安裝的element-ui並非最新版本，有不少屬性沒法使用
npm install --save-dev 依賴包@版本號    安裝指定版本的依賴包

1. 啓動項目(這是第5步，不知道爲啥變成了1...)
   npm run dev
2. 打包項目(這是第6步.)
   npm run build

項目目錄文件說明

├── index.html                                 入口頁面
    ├── build                                      構建腳本目錄
    │   ├── build-server.js                  運行本地構建服務器，能夠訪問構建後的頁面
    │   ├── build.js                             生產環境構建腳本
    │   ├── dev-client.js                     開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新
    │   ├── dev-server.js                   運行本地開發服務器
    │   ├── utils.js                             構建相關工具方法
    │   ├── webpack.base.conf.js            wabpack基礎配置
    │   ├── webpack.dev.conf.js               wabpack開發環境配置
    │   └── webpack.prod.conf.js             wabpack生產環境配置
    ├── config                                          項目配置
    │   ├── dev.env.js                               開發環境變量
    │   ├── index.js                                  項目配置文件
    │   ├── prod.env.js                             生產環境變量
    │   └── test.env.js                              測試環境變量(啓用單元測試纔有該文件)
    ├── package.json                              npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
    ├── src                                              項目源碼目錄    
    │   ├── main.js                                  入口js文件
    │   ├── app.vue                                根組件
    │   ├── components                          公共組件目錄
    │   │   └── helloWorld.vue
    │   ├── assets                               資源目錄，這裏的資源會被wabpack構建
    │   │   └── logo.png
    │   ├── routes                                前端路由
    │   │   └── index.js
    │   ├── store                                  應用級數據（state）
    │   │   └── index.js
    │   └── views                           頁面目錄
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                              純靜態資源，不會被wabpack構建。
    └── test                                測試文件目錄（unit&e2e,啓用單元測試纔有該文件）
        └── unit                            單元測試
            ├── index.js                    入口腳本
            ├── karma.conf.js               karma配置文件
            └── specs                       單測case目錄
                └── Hello.spec.js

安裝過程當中遇到的問題及解決辦法

1. 在遇到錯誤的時候，先檢查一下npm，vue-cli的版本，有時候會由於不是最新版本而報錯

npm update -g               更新npm
npm update vue-cli        更新vue-cli
npm view vue-cli            查看全局的vue-cli的信息

1. 遇到一下問題，表示你沒有安裝該模塊，安裝上就能夠了

Module build failed: Error: Cannot find module '模塊名'

總結

以上就是一個搭建vue項目的完整流程了。因爲時隔過久，在安裝時遇到的其餘問題，有些想不起來了。若是看文的諸位遇到了問題，不要大意的留言吧（要把問題表述清楚哦~），我看到了就會回答的。
若是在文中我有寫錯的地方，請不吝指教，謝謝~