vue起航——搭建腳手架

搭建vue項目以前你須要安裝vue的腳手架，前端小新們一聽確定不樂意了，什麼鬼都是，以前隨便寫幾行代碼後綴改爲HTML就能在瀏覽器直接運行多方便，如今竟然還要安裝各類東西。嗯，首先，我告訴你，若是你想接下來一直混前端行業的話，那恐怕讓你麻煩的安裝還在後頭。其次，小可愛們不要懼怕，跟着教程一步步走，so easy ~O(∩_∩)O~

第一步 要先安裝node.js

從node官網下載並安裝node，安裝步驟很簡單，只要一路「next」就能夠了。
安裝完成後，打開命令行工具輸入命令node -v，以下圖，若是出現對應版本號，就說明安裝成功了。

咱們所須要的npm包管理器，是集成在node中的，因此，直接輸入npm -v就會如以前所示，顯示出npm的版本信息。

到這裏node的環境已經安裝完了,npm包管理工具也有了，可是因爲npm的有些資源被牆，爲了更快更穩定,因此咱們須要切換到淘寶的npm鏡像——cnpm。

 

第二步 安裝cnpm

點擊進入淘寶的cnpm網站,裏面有詳細的配置方法。
或者直接在命令行輸入：

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

而後等待，安裝完成。

輸入cnpm -v，能夠查看當前cnpm版本，這個和npm的版本仍是不同的。

使用cnpm的方法就是，須要用到npm的地方直接使用cnpm替換就能夠了

 

第三   vue安裝

在用 vue.js 構建大型應用時推薦使用 npm 安裝，npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來開發單文件組件。

$ cnpm install vue

 

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

vue-cli 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

# 全局安裝 vue-cli
$ cnpm install --global vue-cli

 

第五  建立一個基於 webpack 模板的新項目

要建立項目，首先咱們要選定目錄，而後再命令行中把目錄轉到選定的目錄。可使用：

#my-project爲自定義項目名
$ vue init webpack my-project

初始化一個項目，或使用

 $ vue init webpack-simple my-project

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好。

須要注意的是項目的名稱不能大寫，否則會報錯。

Project name (my-project) # 項目名稱（個人項目）

Project description (A Vue.js project) # 項目描述一個Vue.js 項目

Author 做者（你的名字）

Install vue-router? (Y/n) # 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）

（這個建議選no，）

Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）

Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試，Nightwatch？ （Y/ N）

固然這些都看你本身我的的狀況，我這裏是全選了是。

 

第六  咱們須要安裝項目所須要的依賴

項目運行以前須要解決項目的依賴問題，使用下面的命令安裝項目的依賴。

 $ cnpm install

 

 

第七  運行咱們的項目吧

$ cnpm run dev

 

若是看到這個界面，說明配置成功

 

 

其實我也是小新，大佬在這裏[]~(￣▽￣)~*