vue-cli2.0過渡到 vue-cli3.0配置和使用

vue-cli2.0過渡到 vue-cli3.0配置和使用

爲了避免vue-cli2.0版本對3.0版本造成影響,需要先卸載全局安裝的2.0版本

一、卸載vue-cli2.0

卸載分兩種情況:

1.安裝nodejs時,是否在nodejs目錄下手動新建了node_cache和node_global文件夾,同時配置了與之相關的環境變量;

這種情況,你只需要把這兩個文件夾刪掉,然後再新建兩個名字一樣的空文件夾
在這裏插入圖片描述

2.默認路徑

這種情況,你只需要找到npm 和npm-cache文件夾,刪掉即可;

路徑:C:\Users\你的用戶名\AppData\Roaming
在這裏插入圖片描述


二、vue-cli3.0配置和使用

1、由於把之前全局安裝的模塊都刪掉了,咱們需要重新配置一下鏡像提高拉包速度
npm install cnpm -g -registry=https://registry.npm.taobao.org

測試是否安裝成功:

cnpm -v
2、全局安裝 vue-cli3.0
cnpm install -g @vue/cli@3.3.0 
3.安裝完畢,我們開始手動創建項目

創建一個myapp的項目文件夾

vue create myapp

點擊鍵盤下方向鍵,選擇Manually select features手動配置;回車
在這裏插入圖片描述
點擊方向鍵,移動到想安裝的模塊,按空格鍵選中,可多選;回車
在這裏插入圖片描述
使用 路由模式history,輸入:y;回車
在這裏插入圖片描述
選擇預處理 Sass/SCSS;回車
在這裏插入圖片描述
選擇語法檢查(Standard標準):移動方向鍵,選中ESLint + Stanard config;回車
在這裏插入圖片描述
選擇語法檢查模塊(2);移動方向鍵,按空格鍵選中,可多選;回車
在這裏插入圖片描述
選擇各模塊存爲單獨的頁面:移動方向鍵,選中in dedicated config files ;回車
在這裏插入圖片描述
是否存配置記錄(N):輸入N;回車
在這裏插入圖片描述
在這裏插入圖片描述
Ctrl + C回到當前目錄,然後執行如下命令

#進入myapp目錄下
cd myapp
#開發環境構建
cnpm run serve

在這裏插入圖片描述
生產環境搭建

cnpm run build

在這裏插入圖片描述
代碼檢測工具

cnpm run lint

在這裏插入圖片描述


vue-cli3.0版本的配置到這裏就結束了

注:這是屬於菜鳥的簡單配置,正在努力爬階中

勤勞一日,可得一夜安眠;勤勞一生,可得幸福長眠。——達·芬奇

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章