1昔脯、安裝node
安裝node,可以到Node 官網(wǎng)nodejs.org云稚,或者國(guó)內(nèi)鏡像npm.taobao.org/mirrors/node,下載最新版本的安裝包静陈。
我使用的國(guó)內(nèi)鏡像
鏡像列表
7.9.0版本鏡像列表
下載后點(diǎn)擊安裝鲸拥,安裝完成后,命令行執(zhí)行下面的命令刑赶,確認(rèn)是否安裝成功。
andedeMacBook-Pro:workspace andewang$ node -v
v7.9.0
andedeMacBook-Pro:workspace andewang$
ps:Node 的模塊管理器 npm 會(huì)一起安裝好金踪,不需要另外安裝
查看npm的版本
$ npm -v
4.2.0
如果版本太低牵敷,小于4.0,請(qǐng)執(zhí)行下面命令升級(jí)(vue-cli需要npm版本大于4.0)
$ npm install -g npm
切換模塊倉(cāng)庫(kù)到阿里的源(Node 的官方模塊倉(cāng)庫(kù)網(wǎng)速太慢)
$ npm config set registry https://registry.npm.taobao.org/
執(zhí)行下面的命令枷餐,確認(rèn)是否切換成功
$ npm config get registry
https://registry.npm.taobao.org/
2、安裝 vue-cli
選擇全局安裝
$ npm install -g vue-cli
安裝成功后奕锌,vue命令查看
使用vue list查看vue的模板
3、生成項(xiàng)目
使用webpack 模板生成一個(gè)vue的項(xiàng)目
過(guò)程總需要填寫(xiě)一些信息饼丘,項(xiàng)目名稱蟀苛、項(xiàng)目描述裆甩、是否需要安裝vue-router、由于只是測(cè)試項(xiàng)目嗤栓,unit test單元測(cè)試和ese tests 我選了no
4.進(jìn)入項(xiàng)目和安裝依賴
$cd test-vue
查看當(dāng)前目錄結(jié)構(gòu)
安裝依賴
$npm install
安裝成功后茉帅,可以發(fā)現(xiàn)多了一個(gè)node_modules目錄
5刹悴、啟動(dòng)項(xiàng)目
$ npm run dev
> test-vue@1.0.0 dev /Users/andewang/workspace/test-vue
> node build/dev-server.js
> Starting dev server...
DONE Compiled successfully in 3041ms 11:34:32
> Listening at http://localhost:8080
瀏覽器查看效果