vue-cli 是vue.js的腳手架，用于自動生成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)目信息
命令輸入后，會進(jìn)入安裝階段，需要用戶輸入一些信息
Project name (vuetest)
項(xiàng)目名稱，可以自己指定，也可直接回車，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會報(bào)錯(cuò)Sorry, name can no longer contain capital letters）
Project description (A Vue.js project) //項(xiàng)目描述
項(xiàng)目描述，也可直接點(diǎn)擊回車，使用默認(rèn)名字
Author (........) //作者
4、用戶選擇
Install vue-router? (Y/n)
是否安裝vue-router，這是官方的路由。這里就輸入“y”后回車即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的，并不會影響整體的運(yùn)行，這也是為了多人協(xié)作。用則選Y
Standard (https://github.com/feross/standard)
標(biāo)準(zhǔn)，什么標(biāo)準(zhǔn)呢，去給提示的standardgithub地址看一下， 原來時(shí)js的標(biāo)準(zhǔn)風(fēng)格
AirBNB (https://github.com/airbnb/JavaScript)
JavaScript最合理的方法，這個(gè)github地址說的是JavaScript最合理的方法
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試
5、切換到項(xiàng)目目錄
cd vuetest
6、安裝依賴
npm install
7、運(yùn)行
npm run dev
8、自動打開默認(rèn)瀏覽器顯示頁面
9、目錄簡要說明
├── 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開發(fā)環(huán)境配置│ └── webpack.prod.conf.js// webpack生產(chǎn)環(huán)境配置├── config// 項(xiàng)目開發(fā)環(huán)境配置│ ├── dev.env.js// 開發(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// 頁面入口文件│ └── main.js// 程序入口文件└── static// 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等│ ├── .gitkeep├── .babelrc// ES6語法編譯配置├── .editorconfig// 定義代碼格式├── .gitignore// git上傳需要忽略的文件格式├── index.html// 入口頁面├── package.json// 項(xiàng)目基本信息├── README.md// 項(xiàng)目說明
以上目錄選擇了獨(dú)立構(gòu)建模式，安裝vue-router，但沒有安裝ESLint、單元測試、e2e測試。
希望本文所述對你有所幫助，vue-cli如何快速構(gòu)建vue項(xiàng)目內(nèi)容就給大家介紹到這里了。希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)vue可以繼續(xù)關(guān)注本站。
新聞熱點(diǎn)
疑難解答
