vue-cli如何快速構(gòu)建vue項(xiàng)目
vue-cli 是vue.js的腳手架，用于自動(dòng)生成vue.js模板工程的。
1、安裝vue-cli
使用npm全局安裝vue-cli（前提是已經(jīng)安裝了nodejs，否則連npm都用不了）
$ npm install -g vue-cli
2、創(chuàng)建自己的工作空間
$ vue init webpack vuetest
3、項(xiàng)目信息
命令輸入后，會(huì)進(jìn)入安裝階段，需要用戶輸入一些信息
Project name (vuetest)
項(xiàng)目名稱，可以自己指定，也可直接回車(chē)，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫(xiě)字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters）
Project description (A Vue.js project) //項(xiàng)目描述
項(xiàng)目描述，也可直接點(diǎn)擊回車(chē)，使用默認(rèn)名字
Author (........) //作者
4、用戶選擇
Install vue-router? (Y/n)
是否安裝vue-router，這是官方的路由。這里就輸入“y”后回車(chē)即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來(lái)統(tǒng)一代碼風(fēng)格的，并不會(huì)影響整體的運(yùn)行，這也是為了多人協(xié)作。用則選Y
Standard (https://github.com/feross/standard)
標(biāo)準(zhǔn)，什么標(biāo)準(zhǔn)呢，去給提示的standardgithub地址看一下， 原來(lái)時(shí)js的標(biāo)準(zhǔn)風(fēng)格
AirBNB (https://github.com/airbnb/JavaScript)
JavaScript最合理的方法，這個(gè)github地址說(shuō)的是JavaScript最合理的方法
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測(cè)試
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測(cè)試
5、切換到項(xiàng)目目錄
cd vuetest
6、安裝依賴
npm install
7、運(yùn)行
npm run dev
8、自動(dòng)打開(kāi)默認(rèn)瀏覽器顯示頁(yè)面
9、目錄簡(jiǎn)要說(shuō)明
├── build // 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼 │ ├── build.js // 生產(chǎn)環(huán)境構(gòu)建代碼 │ ├── check-versions.js // 檢查node&npm等版本 │ ├── dev-client.js // 熱重載相關(guān) │ ├── dev-server.js // 構(gòu)建本地服務(wù)器 │ ├── utils.js // 構(gòu)建配置公用工具 │ ├── vue-loader.conf.js // vue加載器 │ ├── webpack.base.conf.js // webpack基礎(chǔ)配置 │ ├── webpack.dev.conf.js // webpack開(kāi)發(fā)環(huán)境配置 │ └── webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置 ├── config // 項(xiàng)目開(kāi)發(fā)環(huán)境配置 │ ├── dev.env.js // 開(kāi)發(fā)環(huán)境變量 │ ├── index.js // 項(xiàng)目一些配置變量 │ └── prod.env.js // 生產(chǎn)環(huán)境變量 ├──node_modules // 項(xiàng)目依賴的模塊 ├── src // 源碼目錄 │ │ ├── assets // 資源目錄 │ │ └── logo.png │ ├── components // vue公共組件 │ │ └── Hello.vue │ ├──router // 前端路由 │ │ └── index.js // 路由配置文件 │ ├── App.vue // 頁(yè)面入口文件 │ └── main.js // 程序入口文件 └── static // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等 │ ├── .gitkeep ├── .babelrc // ES6語(yǔ)法編譯配置 ├── .editorconfig // 定義代碼格式 ├── .gitignore // git上傳需要忽略的文件格式 ├── index.html // 入口頁(yè)面 ├── package.json // 項(xiàng)目基本信息 ├── README.md // 項(xiàng)目說(shuō)明
以上目錄選擇了獨(dú)立構(gòu)建模式，安裝vue-router，但沒(méi)有安裝ESLint、單元測(cè)試、e2e測(cè)試。
希望本文所述對(duì)你有所幫助，vue-cli如何快速構(gòu)建vue項(xiàng)目?jī)?nèi)容就給大家介紹到這里了。希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)vue可以繼續(xù)關(guān)注本站。
相關(guān)文章
在本篇內(nèi)容中小編給大家分享了關(guān)于Vue中使用canvas方法和步驟，對(duì)此有需要的讀者們參考學(xué)習(xí)下。2019-02-02
使用Vue.js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
在Vue.js中，雙向數(shù)據(jù)綁定是一項(xiàng)非常強(qiáng)大的功能，它能夠使數(shù)據(jù)和視圖之間保持同步，讓開(kāi)發(fā)者更加方便地操作數(shù)據(jù)，在本文中，我們將介紹如何用Vue.js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue3優(yōu)雅的使用element-plus的dialog,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue使用nprogress加載路由進(jìn)度條的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue引入使用localforage改進(jìn)本地離線存儲(chǔ)方式(突破5M限制)
這篇文章主要介紹了Vue引入使用localforage改進(jìn)本地離線存儲(chǔ)方式(突破5M限制),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue v-html指令詳細(xì)解析與代碼實(shí)例(最新推薦)
v-html是Vue.js框架中的一個(gè)指令,用于將數(shù)據(jù)中的HTML代碼動(dòng)態(tài)渲染到頁(yè)面上,它主要用于渲染一些靜態(tài)的HTML內(nèi)容或者從后臺(tái)獲取的富文本數(shù)據(jù),下面介紹Vue v-html詳細(xì)解析與代碼實(shí)例,感興趣的朋友一起看看吧2024-12-12
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下2024-01-01