Vue安裝與環(huán)境配置步驟詳解
1、安裝node.js
從node.js官網(wǎng)下載并安裝node,安裝過程很簡(jiǎn)單,一路“下一步”就可以了(傻瓜式安裝)。安裝完成之后,打開命令行工具(win+r,然后輸入cmd),輸入 node -v
,如下圖,如果出現(xiàn)相應(yīng)的版本號(hào),則說明安裝成功。
2、查看npm
安裝好node.js,就已自帶npm(包管理工具)打開命令行工具(win+r,然后輸入cmd),輸入 npm -v
命令查看npm是否安裝成功。
3、安裝npm的國(guó)內(nèi)鏡像—cnpm
在命令行中輸入npm install -g cnpm –registry=http://registry.npm.taobao.org
,安裝完成之后可以使用cnpm -v
命令查看是否安裝成功,如果輸出版本號(hào)即安裝成功。
4、安裝webpack(一款開源的前端打包工具)
打開命令行工具輸入:cnpm install webpack -g
5、查看webpack是否安裝成功
安裝完成之后輸入 webpack -v
,如果出現(xiàn)xxx not installed,則需要執(zhí)行對(duì)應(yīng)指令,如下圖,就執(zhí)行命令cnpm install webpack -D
和cnpm install webpack-dev-server -D
如果出現(xiàn)相應(yīng)的版本號(hào),則說明安裝成功。
6、安裝vue-cli腳手架構(gòu)建工具
打開命令行工具輸入:cnpm install vue-cli -g
,安裝完成之后輸入 vue -V
(注意這里是大寫的“V”),如下圖,如果出現(xiàn)相應(yīng)的版本號(hào),則說明安裝成功。
7、創(chuàng)建Vue項(xiàng)目
打開命令行工具,進(jìn)入相應(yīng)的文件夾路徑下,執(zhí)行命令vue init webpack vueDemo(自己的項(xiàng)目名)
補(bǔ)充:vue-cli Failed to download repo vuejs-templates/webpack連接超時(shí)解決辦法
在我配置完nmp、node.js、vue-cli環(huán)境,準(zhǔn)備創(chuàng)建項(xiàng)目進(jìn)行最后一步的測(cè)試的時(shí)候Vue init webpack 項(xiàng)目名
總是失敗,都是報(bào)這個(gè)錯(cuò),原因是因?yàn)闊o(wú)法連接外網(wǎng)或者連接超時(shí)導(dǎo)致
經(jīng)過查閱資料,記錄下自己的錯(cuò)誤。
解決的辦法是使用離線下載,我們需要下載github倉(cāng)庫(kù)中的vue-templates/webpack,然后解壓到本地。:
需要手動(dòng)下載 webpack-simple 模板,進(jìn)入鏈接https://github.com/vuejs-templates/webpack
下載到我們的c盤用戶目錄下,自己創(chuàng)建的 .vue-templates文件夾,解壓到當(dāng)前文件夾,并且命名為webpack
再進(jìn)行vue init webpack vuedemo
命令的時(shí)候,需要帶上參數(shù)--offline
表示離線初始化。這樣就能成功創(chuàng)建了,接下來(lái)就是創(chuàng)建項(xiàng)目的參數(shù)了。
最后創(chuàng)建完,npm run dev啟動(dòng)項(xiàng)目,在瀏覽器輸入http://localhost:8080/
測(cè)試一下,成功
總結(jié)
到此這篇關(guān)于Vue安裝與環(huán)境配置步驟的文章就介紹到這了,更多相關(guān)Vue安裝與環(huán)境配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js基礎(chǔ)學(xué)習(xí)之class與樣式綁定
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03vue粘貼復(fù)制功能的實(shí)現(xiàn)過程記錄
最近在項(xiàng)目中遇到點(diǎn)擊按鈕復(fù)制鏈接功能,所以這篇文章主要給大家介紹了關(guān)于vue粘貼復(fù)制功能的實(shí)現(xiàn)過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn)
這篇文章主要介紹了vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm,以下一個(gè)簡(jiǎn)單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下2018-10-10Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問題及解決
這篇文章主要介紹了Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04巧用Vue.js+Vuex制作專門收藏微信公眾號(hào)的app
這篇文章主要為大家詳細(xì)介紹了vue自定義指令三步如何實(shí)現(xiàn)數(shù)據(jù)拉取更新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí),用戶反饋使用瀏覽器(chrome 45)訪問白屏。經(jīng)過排查發(fā)現(xiàn):由于 chrome 45 無(wú)法兼容 ES6 語(yǔ)法導(dǎo)致的,接下來(lái)給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作
這篇文章主要介紹了在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09