Vue cli3專案建立

ps：如果之前安裝有cli2需要先解除安裝cli2才能安裝cli3/cli4；

準備工作：檢視當前版本

vue -v 或者 vue --version

cli2

全域性安裝：npm install vue-cli -g

全域性解除安裝：npm uninstall vue-cli -g

全域性安裝：npm install @vue/cli@版本號 -g

全域性解除安裝：npm uninstall @vue/cli@版本號 -g

// @vue/cli後面不指定版本號則預設安裝cli4最新版

2、建立專案

base是自定義的專案名稱 不能使用大寫字母

vue init webpack base

vue create base

2、配置選擇（a全選，空格鍵-選中/取消）

詢問 路由是否使用 history 模式? 我選擇是

詢問 使用哪種css預處理器？我選擇 第二個

詢問 是否把各個配置使用單獨檔案存放，還是放在package.json中？ 我選擇放在package.json裡面

詢問 是否把本次選擇的配置儲存，以供下次使用？我就暫且不儲存了

等待…成功！

切換到demo路徑中然後執行專案

去瀏覽器開啟 http://localhost:8080/

vue cli3專案優化

做公司後台，使用了vue cli3和heyui做為基礎搭建。對專案做過的優化記錄如下 a.配置多變數環境 通過在package.json 裡的scripts配置項中新增 mode 來選擇不同的環境。中可以通過process.env.node env變數來訪問。b.專案新建vue.config.js，...

Vue cli3 專案優化

vue 專案完成後，因匯入了大量的或體積較大的依賴包以及外掛程式，導致專案變得非常臃腫。下面通過幾個方面來優化頁面的使用者體驗以及提公升頁面的響應速度。在專案中安裝使用nprogress依賴項，使使用者獲得更好的使用者體驗。使用後會在頁面載入時出現頁面頂部的進度條。效果如下 匯入 nprogress...

Vue Cli3專案配置

二 全域性sass配置 三 全域性css配置 四 基礎元件的自動化全域性註冊總結 使用vue cli3構建乙個初始的vue專案 cli3官方文件 1 在 vue.config.js 裡面頂部 路徑依賴 const path require path 查詢檔案方法 const resolve dir ...