《Vue》——从新电脑开始搭建一个已有Vue2项目的环境
《Vue》——从新电脑开始搭建一个已有Vue2项目的环境
-
首先声明,搭建的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" } }
本篇文章仅保证可以运行以上相关版本的vue2项目,因为前端项目对于nodejs和npm的版本要求太严格了,缺一点都运行不起来(作者安了一天才悟到了这个道理,NodeJS和npm应该向maven和anaconda学习一下,太恶心了)
-
首先看这篇文章:https://blog.csdn.net/Python_0011/article/details/131593942
但是不要操作!!!
主要理解这两部分的思想
-
《二、创建全局安装目录和缓存日志目录》
-
《三、配置环境变量》
把这篇文章记为文章a
-
-
然后看这篇文章: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》,以后的部分就不需要了
-
然后看这篇文章:https://zhuanlan.zhihu.com/p/653505351
采用里面的一部分操作(在文章里面找一下就能找到):
- 《开启node.js版本管理》(这是小标题,需要特别留意)
- 《5.使用nvm管理node版本》
-
接下来看这篇文章:https://wenku.csdn.net/answer/69gapoxknb
《将 npm 升级到指定版本》
要安装的npm的版本是:8.4.1
要安装的npm的版本是:8.4.1
要安装的npm的版本是:8.4.1(还是一个一个试出来的)
-
接下来看这篇文章: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-2allsobaiduweb~default-3-124316221.nonecase&spm=1018.2226.3001.4187
请记住:vue安装指定版本——全局安装
但先不要操作!!!
将此文章记为b
-
再看这篇文章: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失效》就可以了
-
-
打开项目,在执行npm install之前
删掉node_modules、dist文件夹(如果有的话)
请看这篇文章:https://wenku.csdn.net/answer/6a22e2561b4b7454d1407ed6f084d854
执行《清除npm缓存》操作
-
最后进行build、serve就结束了(IDEA有可视化操作页面)
"serve": "vue-cli-service serve", "build": "vue-cli-service build"