如何給一個vue項目重命名(vue.js 3.2.4)

一，第一步，修改文件夾名字：

例子：我們把一個名為demo1的項目改名為jwtweb

 

從命令行修改，當然也可以直接從圖形界面的文件管理器操作

liuhongdi@lhdpc:/data/spring/jwtdemo$ cd /data/vue/
liuhongdi@lhdpc:/data/vue$ mv demo1 jwtweb

 

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，第二步，修改package.json中的項目名字:

liuhongdi@lhdpc:/data/vue$ cd jwtweb/
liuhongdi@lhdpc:/data/vue/jwtweb$ vi package.json

原內容:

"name": "demo1”,

修改為:

"name": "jwtweb”,

 

三，第三步,刪除node_modules文件夾，並重新安裝用到的庫

liuhongdi@lhdpc:/data/vue/jwtweb$ rm -rf node_modules/
liuhongdi@lhdpc:/data/vue/jwtweb$ npm install

 

四，運行項目，查看效果

liuhongdi@lhdpc:/data/vue/jwtweb$ npm run serve

從瀏覽器訪問：如圖:

 

五，查看vue.js的版本

liuhongdi@lhdpc:/data/vue/demo1$ npm list vue
demo1@0.1.0 /data/vue/demo1
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.4 deduped
└── vue@3.2.4

 

六，查看@vue/cli的版本:

liuhongdi@lhdpc:~$ vue -V
@vue/cli 4.5.13