《Vue》——从新电脑开始搭建一个已有Vue2项目的环境

《Vue》——从新电脑开始搭建一个已有Vue2项目的环境

---

---

1. 首先声明，搭建的vue2项目是已有项目，package.json如下：

   {
     "name": "xxxx",
     "version": "0.1.0",
     "private": true,
     "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build"
     },
     "dependencies": {
       "@jiaminghi/data-view": "^2.10.0",
       "@types/echarts": "^4.4.3",
       "axios": "^0.21.1",
       "core-js": "^3.6.5",
       "echarts": "^4.6.0",
       "element-ui": "^2.15.8",
       "less": "^4.1.2",
       "less-loader": "^6.2.0",
       "moment": "^2.29.4",
       "v-fit-columns": "^0.2.0",
       "vue": "^2.6.11",
       "vue-awesome": "^4.0.2",
       "vue-baidu-map": "^0.21.22",
       "vue-beautiful-chat": "^2.5.0",
       "vue-router": "^3.5.3",
       "vue-super-flow": "^1.3.8"
     },
     "devDependencies": {
       "@vue/cli-plugin-babel": "~4.5.0",
       "@vue/cli-plugin-router": "~4.5.0",
       "@vue/cli-service": "~4.5.0",
       "css-loader": "^6.7.3",
       "sass": "^1.51.0",
       "sass-loader": "^8.0.2",
       "vue-cli-plugin-element": "^1.0.1",
       "vue-template-compiler": "^2.6.14"
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37

   本篇文章仅保证可以运行以上相关版本的vue2项目，因为前端项目对于nodejs和npm的版本要求太严格了，缺一点都运行不起来（作者安了一天才悟到了这个道理，NodeJS和npm应该向maven和anaconda学习一下，太恶心了）

2. 首先看这篇文章：https://blog.csdn.net/Python_0011/article/details/131593942

   但是不要操作！！！

   主要理解这两部分的思想

   • 《二、创建全局安装目录和缓存日志目录》

   • 《三、配置环境变量》

   把这篇文章记为文章a

3. 然后看这篇文章：https://blog.csdn.net/m0_57545353/article/details/124407977?spm=1001.2014.3001.5506

   安装完nvm（nvm 全名叫做 nodejs version manage,是一个非常棒的nodejs的版本管理工具,主要是通过命令行实现nodejs版本的安装、切换当前使用的nodejs版本）之后，要注意！！！

   要安装Node.js的版本为：v16.4.2

   要安装Node.js的版本为：v16.4.2

   要安装Node.js的版本为：v16.4.2（作者一个版本号一个版本号试出来的）

   安装NodeJS之后，到了《设置全局安装目录和缓存日志目录》（这是个小标题，要特别留意才能看到），请使用文章a的方法！！！（这文章的方法有问题，亲测！！！）

   到了《全局安装npm、cnpm》，以后的部分就不需要了

4. 然后看这篇文章：https://zhuanlan.zhihu.com/p/653505351

   采用里面的一部分操作（在文章里面找一下就能找到）：

   • 《开启node.js版本管理》（这是小标题，需要特别留意）
   • 《5.使用nvm管理node版本》

5. 接下来看这篇文章：https://wenku.csdn.net/answer/69gapoxknb

   《将 npm 升级到指定版本》

   要安装的npm的版本是：8.4.1

   要安装的npm的版本是：8.4.1

   要安装的npm的版本是：8.4.1（还是一个一个试出来的）

6. 接下来看这篇文章：https://blog.csdn.net/qq_45202993/article/details/124316221?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%AE%89%E8%A3%85%E6%8C%87%E5%AE%9A%E7%89%88%E6%9C%AC%E7%9A%84vue&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-3-124316221.nonecase&spm=1018.2226.3001.4187

   请记住：vue安装指定版本——全局安装

   但先不要操作！！！

   将此文章记为b

7. 再看这篇文章：https://blog.csdn.net/m0_48607837/article/details/120704009?spm=1001.2014.3001.5506

   按照文章进行：

   • 前面部分运行一定不行，因为还没有安装vue，往下走即可

   • 到达文章中《在控制面板中运行一下两行命令》，这时候要注意了

     • 安装的@vue/cli版本为：@vue/cli 4.5.13
     • 安装的@vue/cli版本为：@vue/cli 4.5.13
     • 安装的@vue/cli版本为：@vue/cli 4.5.13

   • 请使用文章b中的安装方法！！！

   执行到文章的《成功了，我们成功解决vue ui失效》就可以了

8. 打开项目，在执行npm install之前

   删掉node_modules、dist文件夹（如果有的话）

   请看这篇文章：https://wenku.csdn.net/answer/6a22e2561b4b7454d1407ed6f084d854

   执行《清除npm缓存》操作

9. 最后进行build、serve就结束了（IDEA有可视化操作页面）

       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build"
   1
   2

---