1. 程式人生 > 實用技巧 >vue-cli3.0/4.0搭建專案

vue-cli3.0/4.0搭建專案

vue-cli3.0/4.0 以後專案建立的命令變成了下面這樣

vue create <Project Name> //檔名 不支援駝峰(含大寫字母)

default 是使用預設配置

Manually select features 是自定義配置

我的自定義配置如下

選擇是否使用路由 history router,其實直白來說就是是否路徑帶 # 號,建議選擇 N,否則伺服器還要進行配置

css 的前處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實時的,dart-sass需要儲存後才會生效

sass 官方目前主力推 dart-sass最新的特性都會在這個上面先實現

選擇 ESLint 程式碼校驗規則,提供一個外掛化的javascript程式碼檢測工具,ESLint + Prettier 使用較多

然後選擇什麼時候進行程式碼校驗,Lint on save 儲存就檢查,Lint and fix on commit fix 或者 commit 的時候檢查,建議第一個

下面就是如何存放配置了,In dedicated config files 存放到獨立檔案中,In package.json 存放到 package.json 中

本著專案結構簡單的想法,我選擇了第二個

最後就是是否儲存本次的配置了,N 不記錄,如果選擇Y 需要輸入儲存名字

我這裡就不儲存了,原因是熟能生巧!哈哈哈

然後就等待建立專案吧

出現如圖紅框所示的提示,就搭建成功,進入專案目錄,直接輸入 npm run serve 就可以了