Vue腳手架vue-cli3(4)

vue不支持IE8,因為vue使用了IE8無法模擬的 ECMAScript 5特性

使用vue-cli腳手架會讓我們的工作非常方便

比如想編譯一下es6的語法就使用 babel loader 和 babel core(可以轉(zhuǎn)換es6代碼)

webpack中安裝babel loader babel core

npm install --save-dev babel-loader babel-core

下面利用npm安裝vue-cli3(4)

(一) 安裝:

安裝vue-cli只需要安裝一次即可
全局安裝:npm i -g @vue-cli
或者使用yarn:yarn global add @vue/cli

(二) 項目搭建:

1 在新建文件創(chuàng)建項目:

vue create my-vue (my-vue項目名稱,可以自定義)

2 選擇默認(rèn)(default) 或者 手動(Manually) 這里我選擇Manually select features手動設(shè)置

此處有兩個選擇:
default (babel, eslint) ( 默認(rèn):提供 babeleslint 支持。)
Manually select features ( 手動:提供更多的特性選擇。比如如果想要支持 TypeScript ,就應(yīng)該選擇這一項。)

vue01.jpg

3 選擇配置,看個人項目需求

空格鍵是選中與取消,A鍵是全選


vue02.jpg

TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 Vuex 。
CSS Pre-processors 支持 CSS 預(yù)處理器。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。

根據(jù)自己項目我選擇的是,如下圖:然后,回車
vue03.jpg
4 是否使用路由器的歷史模式?我選擇是(Y) 回車
vue04.jpg
5 需要支持何種動態(tài)樣式語言,(我選擇less)
vue05.jpg
6 選擇哪個自動化代碼格式化檢測,配合 vscode 編輯器的(我選擇的是:ESLint + Prettier 回車)
vue06.jpg
7 選擇語法檢查方式(我選擇的是:Lint on save )

Lint on save 保存就檢測
Lint and fix on commit fix 和 commit 的時候檢查


vue07.jpg
8 希望在哪里放置Babel、PostCSS、ESLint等的配置?(我選擇:In dedicated config files)

In dedicated config files 在專用配置文件中
In package.json 在package.json中


vue8.jpg
9 將此保存為將來項目的預(yù)設(shè)?(我選擇:Y)回車
vue9.jpg

(三) 進(jìn)入項目并啟動項目:

cd my-vue 進(jìn)入到項目的根目錄
npm run serve 啟動項目


vue10.jpg

(四)瀏覽器打開 localhost:8080 訪問默認(rèn)主頁(成功如下圖)

vue11.jpg
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容