vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟
Vue 安裝
vue-cli /webpack 全局安裝
如果在意安裝速度，可以使用淘寶鏡像來安裝
安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完淘寶鏡像后，就可以使用cnpm 來代替 npm 安裝工具啦
我個(gè)人比較喜歡直接使用npm 安裝：
全局webpack：
npm install webpack -g
vue腳手架vue-cli：
npm install vue-cli -g
安裝webpack 版vue 項(xiàng)目
在指定的目錄中打開命令窗口（編輯器中自帶的命令窗口也可以）
vue init webpack myvuedemo
- Project name (回車默認(rèn))
- Project description (A Vue.js project) 回車默認(rèn) （也可以輸入自己的描述）
- Author 回車默認(rèn)（自己的名字）
- Vue build 默認(rèn)選擇 Runtime+Compiler
Install vue-router?Y 安裝
Use ESLint to lint your code? Y (推薦使用，保持良好的代碼編寫規(guī)范)
pick an eslint preset. 默認(rèn) Standard
set up unit tests ？ n (unit 測(cè)試，不需要)
setup e2e tests with Nightwatch？n (e2e 測(cè)試，不需要）
Should we run npm install for you after the project has been created? (recom
mended) npm （選用 npm ）
安裝完畢
目錄結(jié)構(gòu)
Vue運(yùn)行
運(yùn)行命令
cd myvuedemo npm run dev
運(yùn)行成功
頁面內(nèi)容
Vue build 打包
打包命令
npm run build
打包后的目錄結(jié)構(gòu)
運(yùn)行打包項(xiàng)目
需要開啟服務(wù)運(yùn)行
使用http-server 運(yùn)行（如沒有安裝http-server的，使用node 全局安裝 http-server 即可，npm install http-server -g）
cd dist http-server
運(yùn)行打包后的內(nèi)容
從搭建到運(yùn)行打包發(fā)布全部完成，是不是很簡(jiǎn)單呢？
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式
我們經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
本篇文章主要介紹了Vue 實(shí)用分頁paging實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié)
Vue.js中Computed和Methods是兩種常用的數(shù)據(jù)處理方式,本文主要介紹了vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
Vue Element使用icon圖標(biāo)教程詳解(第三方)
element-ui自帶的圖標(biāo)庫不夠全，還是需要需要引入第三方icon。下面小編給大家?guī)砹薞ue Element使用icon圖標(biāo)教程，感興趣的朋友一起看看吧2018-02-02
這篇文章主要介紹了Vue中的 DOM與Diff詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-08-08
vue實(shí)現(xiàn)仿淘寶結(jié)賬頁面實(shí)例代碼
本文是小編給大家分享的vue實(shí)現(xiàn)仿淘寶結(jié)賬頁面實(shí)例代碼，主要功能是仿照淘寶頁面的結(jié)算購物車商品時(shí)自動(dòng)算出合計(jì)價(jià)格的頁面，具體實(shí)例代碼大家參考下本文2017-11-11
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下2018-02-02
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
調(diào)度器是vue3響應(yīng)式系統(tǒng)中一個(gè)非常重要的特性，可調(diào)度性指的是當(dāng)trigger 動(dòng)作觸發(fā)副作用函數(shù)重新執(zhí)行時(shí)，有能力決定副作用函數(shù)執(zhí)行的時(shí)機(jī)、次數(shù)以及方式，本文通過代碼示例給大家介紹調(diào)度器是什么，有什么功能，怎么使用,感興趣的同學(xué)可以借鑒閱讀2023-06-06
這篇文章主要為大家介紹了Vue編譯器AST抽象語法樹源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07