詳解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 鏡像下面去下載安裝 鏡像地址>>
打開安裝好的 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ì)有一系列的問題：
3. 安裝依賴 $ cd my-pro 切換到剛才創(chuàng)建的 my-pro 目錄下面
4. 輸入 $ cnpm install 下載依賴 node_module 模塊 可以在目錄下面看到 node 依賴模塊已經(jīng)下載好了。
5. 到了最后一步了：輸入 cnpm run dev
由于我一開始創(chuàng)建過一個(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng))
這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
最細(xì)致的vue.js基礎(chǔ)語(yǔ)法 值得收藏!
這篇文章主要為大家推薦了一篇值得收藏和學(xué)習(xí)的vue.js最細(xì)致的基礎(chǔ)語(yǔ)法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
今天小編就為大家分享一篇解決vue 表格table列求和的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用vue-virtual-scroller遇到的問題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說(shuō)明,需要的朋友可以參考下2024-09-09
解決vue+elementui項(xiàng)目打包后樣式變化問題
這篇文章主要介紹了解決vue+elementui項(xiàng)目打包后樣式變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
這篇文章主要介紹了Vue3全局組件通信之provide?/?inject,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue實(shí)現(xiàn)子路由調(diào)用父路由的方法
這篇文章主要介紹了vue實(shí)現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作
這篇文章主要介紹了vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08