安裝node.js
從node官網(wǎng)下載并安裝node,安裝步驟很簡單,只要一路“next”就可以了。
安裝完成后,打開命令行工具輸入命令node (此處有空格)-v,如下圖,如果出現(xiàn)對應(yīng)版本號,就說明安裝成功了。
我們所需要的npm包管理器,是集成在node中的,所以,直接輸入npm -v就會如下圖所示,顯示出npm的版本信息。
到這里node的環(huán)境已經(jīng)安裝完了,npm包管理工具也有了,但是由于npm的有些資源被墻,為了更快更穩(wěn)定,所以我們需要切換到淘寶的npm鏡像——cnpm。
安裝cnpm
點擊進入淘寶的cnpm網(wǎng)站,里面有詳細的配置方法。
或者直接在命令行輸入:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org(如沒安裝git,則省略$符號)
然后等待,安裝完成。
輸入cnpm -v,可以查看當(dāng)前cnpm版本,這個和npm的版本還是不一樣的。
使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替換就可以了
vue安裝
在用 vue.js 構(gòu)建大型應(yīng)用時推薦使用 npm 安裝,npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來開發(fā)單文件組件。
$ cnpm install vue
安裝vue-cli腳手架構(gòu)建工具
vue-cli 提供一個官方命令行工具,可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置,帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目:
# 全局安裝 vue-cli
$ cnpm install--global vue-cli
創(chuàng)建一個基于 webpack 模板的新項目
要創(chuàng)建項目,首先我們要選定目錄,然后再命令行中把目錄轉(zhuǎn)到選定的目錄。可以使用:
#my-project為自定義項目名
$ vue init webpackmy-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(但頁面應(yīng)用需要的模塊)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 選擇一個預(yù)置ESLint(使用箭頭鍵)
Setup unit tests with Karma + Mocha? (Y/n) # 設(shè)置單元測Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 設(shè)置端到端測試,Nightwatch? (Y/ N)
當(dāng)然這些都看你自己個人的情況,我這里是全選了是。
安裝項目所需要的依賴
剛初始化的項目是沒有依賴的,如果運行會報類似這樣的錯誤,
所以在這之前需要解決項目的依賴問題,使用下面的命令安裝項目的依賴。
$ cnpm?install
如果出現(xiàn)如下圖情況,說明依賴解決成功。
運行項目
$ cnpm run dev
打包項目
$ cnpm run build