vue.js有著名的全家桶系列,包含了vue-router矛渴,vuex椎扬, vue-resource,再加上構(gòu)建工具vue-cli具温,就是一個完整的vue項目的核心構(gòu)成蚕涤。
vue-cli這個構(gòu)建工具大大降低了webpack的使用難度,支持熱更新铣猩,有webpack-dev-server的支持揖铜,相當(dāng)于啟動了一個請求服務(wù)器,給你搭建了一個測試環(huán)境达皿,只關(guān)注開發(fā)就OK天吓。
1.安裝node.js
下載安裝node.js,一路默認(rèn)安裝即可峦椰,安裝完畢龄寞,啟動命令行,輸入命令node -v汤功,可以看到node.js的版本號
2.安裝vue-cli
- 使用npm(需要安裝node環(huán)境)全局安裝webpack物邑,啟動命令行,輸入如下命令:
npm install -g webpack
耐心等待安裝完成之后輸入 webpack -v,可以看到如圖所示
- 從webpack 4.X開始色解,需要全局安裝webpack-cli
npm install webpack webpack-cli -g
- 全局安裝vue-cli茂嗓,在cmd中輸入命令
npm install --global vue-cli
耐心等待安裝完成之后輸入 vue -V(注意這里是大寫的“V”),如下圖科阎,如果出現(xiàn)相應(yīng)的版本號在抛,則說明安裝成功。
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到
打開node_modules也可以看到:
4.用vue-cli來構(gòu)建項目
首先在D盤新建一個VueStudy作為項目存放地萧恕,然后使用命令行cd進(jìn)入到項目目錄,輸入
vue init webpack demo
需要選擇一些選項肠阱,會跳出幾個選項讓你回答:
Project name (demo): -----項目名稱票唆,直接回車,按照括號中默認(rèn)名字(注意這里的名字不能有大寫字母)
Project description (A Vue.js project): ----項目描述屹徘,也可直接點擊回車走趋,使用默認(rèn)名字
Author (): ----作者,輸入你的大名
接下來會讓用戶選擇:Runtime + Compiler: recommended for most users 運(yùn)行加編譯噪伊,既然已經(jīng)說了推薦簿煌,就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運(yùn)行時,已經(jīng)有推薦了就選擇第一個了Install vue-router? (Y/n) 是否安裝vue-router鉴吹,這是官方的路由姨伟,大多數(shù)情況下都使用。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼豆励,ESLint是個代碼風(fēng)格管理工具夺荒,是用來統(tǒng)一代碼風(fēng)格的。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)良蒸,編寫vue項目時的代碼風(fēng)格Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試
-
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試
image
配置完成后技扼,進(jìn)入demo項目目錄,安裝依賴
npm install
完成后嫩痰,查看項目路徑下各個目錄含義
啟動項目
npm run dev
如果瀏覽器打開之后剿吻,沒有加載出頁面,有可能是本地的 8080 端口被占用串纺,需要修改一下配置文件 config里的index.js
運(yùn)行成功(服務(wù)啟動成功后瀏覽器會默認(rèn)打開一個“歡迎頁面”)
備注:
npm淘寶鏡像安裝命令
npm install -g cnpm --registry=https://registry.npm.taobao.org