1. node及npm的安裝

Windows
MAC
Linux

2. vue-cli的安裝

在第一步已經完成的基礎上，通過如下命令安裝vue-cli:

npm install vue-cli -g

3. 通過vue-cli構建項目

通過 vue+init+模板名+項目名來構建項目

如vue init webpack vue-project

各種模板區別詳見

https://github.com/vuejs/vue-cli

需要的參數

完成后進入目錄
cd vue-project

安裝依賴
npm install (此過程時間可能較長)

安裝完成后 , 輸入如下命令:
npm run dev

瀏覽器會彈出一個地址為localhost:8080的網頁 , 表示運行成功 , 如果未彈出網頁 , 且cmd內顯示成功 , 則在瀏覽器地址欄手動輸入localhost:8080即可.

網頁打開效果

4. 修改index.html

vue-cli生成的index.html文件中沒有關于viewport的標簽 , 需要加上:

<meta name="viewport" content="width=device-width, initial-scale=1">

同時 , 清除body默認的padding與margin

<style>
  body{
    margin:0;
    padding:0;
  }
</style>

然后我們開啟手機模式

手機模式效果

通常 , 我們需要在src/App.vue的style標簽內添加以下代碼:

#app,#app>div{
    position: absolute;
    width: 100%;
    height: 100%;
  }

來設置每個頁面的寬高

5.打包

在打包之前 , 我們需要修改config/index.js中導出的build對象中的assetsPublicPath ( 在文件中搜索assetsPublicPath即可找到 ) , 將原來的 "/" 修改為 "./" , 然后在項目目錄中運行以下命令:

npm run build

等待打包完成后 , 在項目文件中可以找到dist文件夾 , 打開里面的index.html即可看到靜態效果

6.vue-router , vuex , axios的安裝

運行如下命令安裝vue-router , vuex , 以及axios:

npm install vue-router vuex axios --save

( 如果在vue-cli構建項目時安裝了vue-router , 這里可以不安裝vue-router )

vue-router文檔
vuex文檔
axios文檔

組件庫的選擇詳見更多關于Vue的資源
至此 , 項目便構建完成啦 , 祝開發愉快~