创建一个Vue项目-笔记

参考资料：

安装webpack

安装vue-router报错

vue学习视频

安装node-sass报错

解决node-sass,sass-loader,webpack版本冲突问题

---

1、安装node,官网

查看版本：node -v

node自带npm

查看npm版本：npm -v

2、（如果没有安装过）安装vue-cli

npm install vue-cli -g

3、（如果没有安装过）安装webpack

npm i -g webpack

3、创建一个文件夹，在该文件夹下进入cmd

4、初始化项目

vue init webpack 项目名

省略选择步骤（都是 no）

5、安装vue-router

npm install vue-router --save-dev

​报错了呀

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue-element@1.0.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.5.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from vue-router@4.0.14
npm ERR! node_modules/vue-router
npm ERR!   dev vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\asus\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\asus\AppData\Local\npm-cache\_logs\2022-04-09T10_51_42_512Z-debug-0.log

解决参考：https://blog.csdn.net/qq_36934489/article/details/118313555

先 npm view vue-router versions --json 查看可选vue-router的版本

然后安装合适的版本 ：npm install vue-router@3.2.0 --save-dev

6、安装element

npm i element-ui -S

7、安装Sass加载器

这里的版本匹配太复杂了，node/node-sass/sass-loader,解决参考：https://deepmind.t-salon.cc/article/5510
感谢大佬的博客，我弄了一下午，好绝望，终于解决了（哭的好大声）

npm install sass-loader@7.3.1 sass@1.43.4 --save-dev

8、安装所有依赖

npm install

9、运行

npm run dev