成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用vue-cli腳手架+webpack搭建vue項目

dantezhao / 723人閱讀

摘要：查看安裝是否正?；剀嚭罂吹捷敵霎斍鞍惭b的版本號，例如，即安裝正常通過以上步聚，說明已經安裝完并能正常運行。再次用腳手架搭建項目第二步將模塊安裝完成后，就可以使用以下命令創(chuàng)建項目了。

前言 
世間萬難 無非一拖二懶三不讀書 對 說的就是我

突然覺得這句話說的很對，自從上次寫完nodejs安裝及npm全局模塊路徑的設置已經過去兩月有余，而我的vue框架學習也就止步于此。還是沒有給自己施加壓力，渾渾噩噩的又度過了這么長時間，想想就很愧疚。(其實是懶癌患者)或許自己還是個少年吧，比較彷徨。

學習真的是自己的事，自己不想學，自制力不夠，半點不由人。畢竟學無止境，而且技術的更新速度又非?？?，應當時刻保持敬畏之心。當然也不是一件事沒做，最近在看《JavaScript設計模式》(張容銘著)一書，收獲頗多。對于JavaScript的面向對象有了更深的見解，對原型及原型鏈，以及對象的封裝、繼承、多態(tài)有了新的認識。但今天的重點不在于此，只是想通過寫文章記錄下自己在vue框架學習上的積累。

首先安裝node.js并設置其環(huán)境變量

這里我就不多說了，畢竟上篇文章已經寫的很清楚了。請戳：nodejs安裝及npm全局模塊路徑的設置，安裝設置完成后，為了驗證安裝是否正確，請window+r，輸入cmd，快捷打開cmd控制臺后，在命令行輸入以下內容：

// 查看node安裝是否正常
node -v 
// 回車后看到輸出當前安裝node的版本號，例如：v8.11.1，即安裝正常

由于目前nodejs中已經集成了npm，所以我們在命令行輸入以下內容，就可查看npm是否安裝。

// 查看npm安裝是否正常
npm -v 
// 回車后看到輸出當前安裝npm的版本號，例如：5.6.0，即安裝正常

通過以上步聚，說明已經安裝完nodejs并能正常運行。

其次安裝vue、vue-cli腳手架和webpack打包工具

第一步已經安裝完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三個模塊安裝到了npm包管理工具設置后的全局路徑中。

再次用vue-cli腳手架搭建vue項目

第二步將vue、vue-cli、webpack模塊安裝完成后，就可以使用以下命令創(chuàng)建vue項目了。

// vue init  [project-name]
vue init webpack vue-web

// 回車后有以下內容需要填寫
Project name (vue-web)    // 項目名稱
Project description (this is my first vue project)     // 項目描述（可以自行描述一段話）
Author (liwei)    // 項目作者
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)建項目名稱為vue-web的項目了。

最后檢驗vue項目是否創(chuàng)建成功

首先在cmd命令行中先進入到vue項目所在的路徑下，然后輸入：

// 安裝package.json中的依賴
npm install 

// 運行項目
npm run dev
// 命令行顯示無異常，然后可以在瀏覽器打開http:localhost:8080/#/查看結果

// 項目打包發(fā)布
npm run build（暫時不做過多介紹）
小結

通過以上步聚，就可以完成vue-cli配合webpack搭建vue項目的開發(fā)。當然，開發(fā)的過程中存在不少要填的坑，其實每走一步，都是很成功的。

你必須不停地奔跑 才能留在原地

共勉。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/96508.html

相關文章

  • 為什么我不推薦你使用vue-cli創(chuàng)建腳手架？

    摘要：后來經過排查你會發(fā)現是由于目前還沒有版本?？梢允褂迷摲绞浇鉀Q。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進階中級的初級前端人員。 最近在知乎看到一個問題，原問題如下： 很奇怪，為什么現在能找到自己手動創(chuàng)建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做...

    trigkit4 評論0 收藏0

  • 【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

    摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

    huhud 評論0 收藏0

  • 【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

    摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

    MkkHou 評論0 收藏0

  • vue-cli3腳手架的使用和相關配置

    摘要：前言通過搭建交互式的項目腳手架。通過快速開始零配置原型開發(fā)。與此同時，它也為每個工具提供了調整配置的靈活性，無需。例如，如果你的應用被部署在，則設置為。我們將在下篇文章里詳細講述的使用官方文檔 前言 通過 @vue/cli 搭建交互式的項目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個運行時依賴 (@vue/cli-se...

    Sanchi 評論0 收藏0

  • vue-cli3腳手架的使用和相關配置

    摘要：前言通過搭建交互式的項目腳手架。通過快速開始零配置原型開發(fā)。與此同時，它也為每個工具提供了調整配置的靈活性，無需。例如，如果你的應用被部署在，則設置為。我們將在下篇文章里詳細講述的使用官方文檔 前言 通過 @vue/cli 搭建交互式的項目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個運行時依賴 (@vue/cli-se...

    jsummer 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<