資訊專欄INFORMATION COLUMN
摘要：查看安裝是否正常回車后看到輸出當(dāng)前安裝的版本號(hào)，例如，即安裝正常通過以上步聚，說明已經(jīng)安裝完并能正常運(yùn)行。再次用腳手架搭建項(xiàng)目第二步將模塊安裝完成后，就可以使用以下命令創(chuàng)建項(xiàng)目了。
前言
世間萬難 無非一拖二懶三不讀書 對 說的就是我
突然覺得這句話說的很對，自從上次寫完nodejs安裝及npm全局模塊路徑的設(shè)置已經(jīng)過去兩月有余，而我的vue框架學(xué)習(xí)也就止步于此。還是沒有給自己施加壓力，渾渾噩噩的又度過了這么長時(shí)間，想想就很愧疚。(其實(shí)是懶癌患者)或許自己還是個(gè)少年吧，比較彷徨。
學(xué)習(xí)真的是自己的事，自己不想學(xué)，自制力不夠，半點(diǎn)不由人。畢竟學(xué)無止境，而且技術(shù)的更新速度又非常快，應(yīng)當(dāng)時(shí)刻保持敬畏之心。當(dāng)然也不是一件事沒做，最近在看《JavaScript設(shè)計(jì)模式》(張容銘著)一書，收獲頗多。對于JavaScript的面向?qū)ο笥辛烁畹囊娊猓瑢υ图霸玩湥约皩ο蟮姆庋b、繼承、多態(tài)有了新的認(rèn)識(shí)。但今天的重點(diǎn)不在于此，只是想通過寫文章記錄下自己在vue框架學(xué)習(xí)上的積累。
首先安裝node.js并設(shè)置其環(huán)境變量這里我就不多說了，畢竟上篇文章已經(jīng)寫的很清楚了。請戳：nodejs安裝及npm全局模塊路徑的設(shè)置，安裝設(shè)置完成后，為了驗(yàn)證安裝是否正確，請window+r，輸入cmd，快捷打開cmd控制臺(tái)后，在命令行輸入以下內(nèi)容：
// 查看node安裝是否正常 node -v // 回車后看到輸出當(dāng)前安裝node的版本號(hào)，例如：v8.11.1，即安裝正常
由于目前nodejs中已經(jīng)集成了npm，所以我們在命令行輸入以下內(nèi)容，就可查看npm是否安裝。
// 查看npm安裝是否正常 npm -v // 回車后看到輸出當(dāng)前安裝npm的版本號(hào)，例如：5.6.0，即安裝正常
通過以上步聚，說明已經(jīng)安裝完nodejs并能正常運(yùn)行。
其次安裝vue、vue-cli腳手架和webpack打包工具第一步已經(jīng)安裝完node及npm包管理工具，接下來就很好辦了，直接在cmd命令行中輸入：
1.安裝vue// 下載安裝vue npm install vue -g （-g表示安裝全局模塊的意思）2.安裝vue-cli
// 下載安裝vue-cli腳手架 npm install vue-cli -g （-g表示安裝全局模塊的意思）3.安裝webpack
// 下載安裝webpack打包工具 npm install webpack -g （-g表示安裝全局模塊的意思）
至此，以上三行命令表示將vue、vue-cli、webpack三個(gè)模塊安裝到了npm包管理工具設(shè)置后的全局路徑中。
再次用vue-cli腳手架搭建vue項(xiàng)目第二步將vue、vue-cli、webpack模塊安裝完成后，就可以使用以下命令創(chuàng)建vue項(xiàng)目了。
// vue init[project-name] vue init webpack vue-web // 回車后有以下內(nèi)容需要填寫 Project name (vue-web) // 項(xiàng)目名稱 Project description (this is my first vue project) // 項(xiàng)目描述（可以自行描述一段話） Author (liwei) // 項(xiàng)目作者 Vue build (standalone) Install vue-router? (Yes) // 安裝vue路由 Use ESLint to lint your code? (Yes) Pick an ESLint preset (none) Set up unit tests (No) // 單元測試 Setup e2e tests with Nightwatch? (No) // 單元測試 Should we run `npm install` for you after the project has been created? (recommended) (npm)
cmd命令行填寫完后直接回車就可以創(chuàng)建項(xiàng)目名稱為vue-web的項(xiàng)目了。
最后檢驗(yàn)vue項(xiàng)目是否創(chuàng)建成功首先在cmd命令行中先進(jìn)入到vue項(xiàng)目所在的路徑下，然后輸入：
// 安裝package.json中的依賴 npm install // 運(yùn)行項(xiàng)目 npm run dev // 命令行顯示無異常，然后可以在瀏覽器打開http:localhost:8080/#/查看結(jié)果 // 項(xiàng)目打包發(fā)布 npm run build（暫時(shí)不做過多介紹）小結(jié)
通過以上步聚，就可以完成vue-cli配合webpack搭建vue項(xiàng)目的開發(fā)。當(dāng)然，開發(fā)的過程中存在不少要填的坑，其實(shí)每走一步，都是很成功的。
你必須不停地奔跑 才能留在原地
共勉。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96508.html
摘要：后來經(jīng)過排查你會(huì)發(fā)現(xiàn)是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進(jìn)階中級的初級前端人員。 最近在知乎看到一個(gè)問題，原問題如下： 很奇怪，為什么現(xiàn)在能找到自己手動(dòng)創(chuàng)建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個(gè)腳手架的我來說資料真是少得可憐。難道現(xiàn)在一般的做...
摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗瑢Σ寮创a進(jìn)行了詳細(xì)解讀，希望對于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實(shí)踐中還是...
摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗瑢Σ寮创a進(jìn)行了詳細(xì)解讀，希望對于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實(shí)踐中還是...
摘要：前言通過搭建交互式的項(xiàng)目腳手架。通過快速開始零配置原型開發(fā)。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無需。例如，如果你的應(yīng)用被部署在，則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔 前言 通過 @vue/cli 搭建交互式的項(xiàng)目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-se...
摘要：前言通過搭建交互式的項(xiàng)目腳手架。通過快速開始零配置原型開發(fā)。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無需。例如，如果你的應(yīng)用被部署在，則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔 前言 通過 @vue/cli 搭建交互式的項(xiàng)目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-se...
閱讀 2122·2021-11-22 15:24
閱讀 2410·2021-09-09 11:53
閱讀 3037·2021-09-04 16:40
閱讀 1636·2019-08-30 15:52
閱讀 3355·2019-08-29 13:47
閱讀 2735·2019-08-26 17:40
閱讀 1541·2019-08-26 13:24
閱讀 2245·2019-08-26 12:01
