windows下vue-cli及webpack搭建安裝環(huán)境
1、安裝Node.js,node.js安裝包及源碼下載地址為:https://nodejs.org/en/download/。
2、安裝npm,由于新版的nodejs已經集成了npm,所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝。命令如下,出現(xiàn)版本提示表示安裝成功:
$ npm -v 3.10.8
如果你安裝的是舊版本的 npm,可以很容易得通過 npm 命令來升級,命令如下:
npm install npm -g
你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模塊了:
cnpm install [name]
3、安裝vue-cil,vue-cil是vue的腳手架工具。其模板可以通過 vuejs-templates 來查看。
我們首先,需要安裝vue-cil。命令如下:
npm install -g vue-cli
這個命令只需要運行一次就可以了。安裝上之后,以后就不用安裝了。
下面,我們來用vue-cil構建一個項目。
首先,我們在終端中把當前目錄定位到你準備存放項目的地方。如我是準備放在E:\vue這個目錄下面,那么先通過cmd命令進入這個目錄,命令如下:
cd vue
進入到目錄之后,我們按照下面的代碼輸入,新建一個自己的vue項目demo01
vue init webpack demo01
輸入這個命令之后,會出現(xiàn)一些提示,是什么不用管,一直按回車即可。
如上圖所示,就說明我們的項目構建成功了。并且,給出了下面要執(zhí)行的命令,我們來逐條執(zhí)行:
cd demo01
cnpm install
(這里用國內的阿里的cnpm安裝比較快)
安裝完成之后再運行命令:
npm run dev
執(zhí)行后,CMD命令窗口如圖:
說明項目跑起來了,在運行了npm run dev之后,會自動打開一個瀏覽器窗口,就可以看到實際的效果了。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue?element-ui表格內嵌進度條功能實現(xiàn)方法
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關于Vue?element-ui表格內嵌進度條功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03vue 根據(jù)數(shù)組中某一項的值進行排序的方法
這篇文章主要介紹了vue 根據(jù)數(shù)組中某一項的值進行排序的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08Vue Element前端應用開發(fā)之功能點管理及權限控制
在一個業(yè)務管理系統(tǒng)中,如果我們需要實現(xiàn)權限控制功能,我們需要定義好對應的權限功能點,然后在界面中對界面元素的功能點進行綁定,這樣就可以在后臺動態(tài)分配權限進行動態(tài)控制了,權限功能點是針對角色進行控制的,也就是簡稱RBAC(Role Based Access Control)。2021-05-05vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue.js實現(xiàn)開關(switch)組件實例代碼
這篇文章介紹了vue.js實現(xiàn)開關(switch)組件的實例代碼,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06