快捷導(dǎo)航

vue-cli如何快速構(gòu)建vue項(xiàng)目

更新時(shí)間：2017年04月26日 09:36:05 作者：YukiYang

本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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)目名稱，可以自己指定，也可直接回車，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會(huì)報(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)格的，并不會(huì)影響整體的運(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)

是否安裝單元測(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)打開默認(rèn)瀏覽器顯示頁面

9、目錄簡(jiǎn)要說明

├── 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、單元測(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)注本站。

您可能感興趣的文章: