如何给一个vue项目重命名(vue.js 3.2.4)

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

例子：我们把一个名为demo1的项目改名为jwtweb

 

从命令行修改，当然也可以直接从图形界面的文件管理器操作

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

 

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/ru-he-gei-yi-ge-vue-xiang-mu-zhong-ming-ming-vue-js-3-2-4/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，第二步，修改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