詳解Vue使用命令行搭建單頁(yè)面應(yīng)用
使用命令行搭建單頁(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 鏡像下面去下載安裝 鏡像地址>>
打開(kāi)安裝好的 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. 安裝依賴(lài) $ cd my-pro 切換到剛才創(chuàng)建的 my-pro 目錄下面
4. 輸入 $ cnpm install 下載依賴(lài) node_module 模塊 可以在目錄下面看到 node 依賴(lài)模塊已經(jīng)下載好了。
5. 到了最后一步了：輸入 cnpm run dev
由于我一開(kāi)始創(chuàng)建過(guò)一個(gè)項(xiàng)目，node 的 8080 端口被占用了，所以下面就報(bào)錯(cuò)了，如圖：
一個(gè)簡(jiǎn)單粗暴的方法就是關(guān)閉當(dāng)前的 node 進(jìn)程：
最最最最最最最最最最最最最最最最最最最最最最最最最最最后一步：
下面我們打開(kāi) 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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能
這篇文章主要介紹了vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue3中安裝使用vue-i18n實(shí)時(shí)切換語(yǔ)言且不用刷新
這篇文章主要介紹了vue3中安裝使用vue-i18n實(shí)時(shí)切換語(yǔ)言不用刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟
這篇文章主要介紹了vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue+ECharts實(shí)現(xiàn)中國(guó)地圖的繪制及各省份自動(dòng)輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國(guó)地圖的繪制以及拖動(dòng)、縮放和各省份自動(dòng)輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
利用nodeJS+vue圖片上傳實(shí)現(xiàn)更新頭像的過(guò)程
Vue是一套構(gòu)建用戶(hù)界面的框架,最近工作中遇到了一個(gè)需求,需要做一個(gè)更新頭像的通能,下面這篇文章主要給大家介紹了關(guān)于利用nodeJS+vue圖片上傳的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue項(xiàng)目使用localStorage+Vuex保存用戶(hù)登錄信息
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目使用localStorage+Vuex保存用戶(hù)登錄信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Vue實(shí)現(xiàn)路由嵌套的方法實(shí)例
嵌套路由顧名思義就是路由的多層嵌套,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由嵌套的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11