使用命令行搭建單頁(yè)面應(yīng)用

我們來(lái)看一下最后完成的效果：

大綱

1. 下載 node, git, npm

2. 使用命令行安裝一個(gè)項(xiàng)目

一、 下載工具

node, git 的下載大家可以去官網(wǎng)自行下載就可以了。

下面說(shuō)一說(shuō)安裝 npm，npm 是在以上兩個(gè)都安裝的情況下才可以的。

國(guó)內(nèi)直接 git npm 非常慢，所以我們到 taobao 的 npm 鏡像下面去下載安裝 鏡像地址>>

打開安裝好的 git bash

1 . 在 Git Bash 輸入鏡像的地址：

下載成功后，輸入 cnpm -v 看看是否安裝成功了

2 . 安裝好 npm 下面就好辦了，我們回到 Vue 官方網(wǎng)站看使用命令行安裝步驟： 猛戳回到官網(wǎng)>>

按照上面的步驟進(jìn)行安裝：( 以上只要是 npm 的都要改成 cnpm )

1. 全局安裝 vue-cli $ cnpm install -g vue-cli

2. 創(chuàng)建一個(gè)基于 " webpack "的模板的項(xiàng)目 $ vue init webpack my-pro

接下來(lái)會(huì)有一系列的問(wèn)題：

3. 安裝依賴 $ cd my-pro 切換到剛才創(chuàng)建的 my-pro 目錄下面

4. 輸入 $ cnpm install 下載依賴 node_module 模塊 可以在目錄下面看到 node 依賴模塊已經(jīng)下載好了。

5. 到了最后一步了：輸入 cnpm run dev

由于我一開始創(chuàng)建過(guò)一個(gè)項(xiàng)目，node 的 8080 端口被占用了，所以下面就報(bào)錯(cuò)了，如圖：

一個(gè)簡(jiǎn)單粗暴的方法就是關(guān)閉當(dāng)前的 node 進(jìn)程：

最最最最最最最最最最最最最最最最最最最最最最最最最最最后一步：

下面我們打開 http://localhost:8080 看看吧。終于成功了！！！

PS: 記錄一些命令

1. $ cnpm install --global vue-cli

2. $ vue init webpack-simple demo

3. $ cd demo/

4. $ cnpm install

5. $ npm run dev

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。