成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue.js使用vue-cli搭建一個SPA項目

B0B0 / 1739人閱讀

摘要:之所以寫這篇如何運用腳手架自動化構(gòu)建出一個項目的大架構(gòu),主要是面向想入門的小伙伴。之前,我第一次接觸,一直摸不著頭腦,想在網(wǎng)上搜個接地氣的教程都找不到。

WHY

之所以寫這篇如何運用腳手架自動化構(gòu)建出一個項目的大架構(gòu),主要是面向想入門vue的小伙伴。之前,我第一次接觸vue,一直摸不著頭腦,想在網(wǎng)上搜個接地氣的教程都找不到。SO,我以如何搭建結(jié)構(gòu)為開始,向想入門vue的童鞋們把我僅有的力量貢獻出來,隨后我會持續(xù)更新vue如何與ui框架結(jié)合使用;在低版本ie如何運用vwjs將其打包為桌面應(yīng)用以及我在實際開發(fā)的過程中踩過的各種坑。歡迎大家觀看與互相交流哦。

HOW

話不多說,切入主題

1.首先,你的電腦需要nodejs環(huán)境,如果沒有,點擊下面鏈接去下載吧。

點我進入node官網(wǎng)
https://nodejs.org/en/
安裝完畢之后在命令窗口執(zhí)行 node -v

如果執(zhí)行完畢后會出現(xiàn)node的版本號就ok了 v6.10.1

2.安裝腳手架vue-cli

在命令窗口執(zhí)行 npm install -g vue-cli

安裝完畢之后在命令窗口執(zhí)行 vue -V -----大寫V哦
如果執(zhí)行完畢后會出現(xiàn)cli的版本號就ok了

3.在你的項目目錄下初始化一個webpack配置的項目

在命令窗口執(zhí)行 vue init webpack name -------name是你的項目名稱
執(zhí)行命令后會有 ?Project name --------輸入項目名稱,回車

                        `Project description` -----------輸入你的項目描述,回車

Author -----------顧名思義,輸入作者名,回車

Vue build ----------- 必須回車啊
Install vue-router? ----------是否需要vue-router,做項目有路由啊,輸入y,回車
Use ESLint to lint your code ? --------是否需要ESlint檢驗?zāi)愕拇a格式,個人建議,如果不太了解ESlint,或者你的開發(fā)團隊不需要這個東東,最好n,否則他的檢驗標準會讓你很無語,當然,你可以通過配置去除你不需要的代碼格式校驗,隨你嘍,要就y,不要就n,回車
Setup unit tests with Karma + Mocha? (y/n) ----------是否安裝單元測試,看你的需求嘍,一般情況沒有就n,回車
Setup e2e tests with Nightwatch(y/n)? -----------是否安裝e2e測試,同上,回車

4.在你新建好的項目目錄下install安裝所有需要的模板

在命令窗口執(zhí)行npm install-------它會根據(jù)package.json文件里依賴的所有模塊進行安裝,回車之后你就靜靜的wait,其實據(jù)說用yarn會快一點,我在工作中l(wèi)eader要求用yarn,不過倆者用法差不多,有興趣的話可以去看看哦

5.運行你的項目

在命令窗口執(zhí)行npm run dev ----現(xiàn)在你的項目就運行起來了

PIC

*注意,一定要在你初始化好的項目下進行操作,否則會有很多WARN,當然,你的構(gòu)建也會失敗,之前我粗心踩過這個坑。

網(wǎng)頁中有上面的樣子,你就成功啦

github小項目

在工作間隙一直在寫這個小項目,感興趣的小伙伴可以去clone下來交流指正,記得star哦
git地址 https://github.com/PaiDaXingSWK/elema.git

項目已經(jīng)完成效果

END

稍后我會帶著想入門vue的童鞋進行深一步的演練,真心希望大家入門vue不會像我之前一樣痛苦,當然,后續(xù)我也會在空余時間完成一個小項目在我的github與大家互相交流,歡迎大家關(guān)注,收藏,指正,一起學(xué)習(xí)交流

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/50914.html

相關(guān)文章

  • vue.js使用vue-cli搭建一個SPA項目

    摘要:之所以寫這篇如何運用腳手架自動化構(gòu)建出一個項目的大架構(gòu),主要是面向想入門的小伙伴。之前,我第一次接觸,一直摸不著頭腦,想在網(wǎng)上搜個接地氣的教程都找不到。 WHY 之所以寫這篇如何運用腳手架自動化構(gòu)建出一個項目的大架構(gòu),主要是面向想入門vue的小伙伴。之前,我第一次接觸vue,一直摸不著頭腦,想在網(wǎng)上搜個接地氣的教程都找不到。SO,我以如何搭建結(jié)構(gòu)為開始,向想入門vue的童鞋們把我僅有的...

    CrazyCodes 評論0 收藏0
  • vue服務(wù)端渲染demo將vue-cli生成的項目轉(zhuǎn)為ssr

    摘要:無需使用服務(wù)器實時動態(tài)編譯,而是使用預(yù)渲染方式,在構(gòu)建時簡單地生成針對特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序不同,服務(wù)器渲染應(yīng)用程序,需要處于運行環(huán)境。更多的服務(wù)器端負載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉(zhuǎn)為ssr -prerender-demo 使用prer...

    whinc 評論0 收藏0
  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

B0B0

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<