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

CrazyCodes 發布于2019-08-20 17:31 / 784人閱讀

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

WHY

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

HOW

話不多說，切入主題

1.首先，你的電腦需要nodejs環境，如果沒有，點擊下面鏈接去下載吧。

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

如果執行完畢后會出現node的版本號就ok了 v6.10.1

2.安裝腳手架vue-cli

在命令窗口執行 npm install -g vue-cli

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

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

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

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

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

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

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

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

5.運行你的項目

在命令窗口執行npm run dev ----現在你的項目就運行起來了

PIC

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

網頁中有上面的樣子，你就成功啦

github小項目

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

項目已經完成效果

END

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

GPU云服務器云服務器 Vue.js spa vue.js 屬性 vue.js自學

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83651.html

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

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

B0B0 2019-08-01 17:03 評論0 收藏0
vue服務端渲染demo將vue-cli生成的項目轉為ssr

摘要：無需使用服務器實時動態編譯，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同，服務器渲染應用程序，需要處于運行環境。更多的服務器端負載。目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

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

sutaking 2019-08-02 15:17 評論0 收藏0