Vue项目初始化遇到的问题

Vue项目依赖与配置指南

最新推荐文章于 2023-06-19 21:25:12 发布

原创最新推荐文章于 2023-06-19 21:25:12 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细解析了Vue项目中缺失依赖的解决方法，包括安装stylus-loader、css-loader和style-loader，以及处理webpack和npm警告信息的具体步骤。同时，介绍了Vue项目初始化的全过程，从安装node.js、设置淘宝镜像，到使用vue-cli创建项目。

问题1：
These dependencies were not found:
!!vue-style-loader!css-loader?{“sourceMap”:true}…省略…HelloWorld.vue
…HelloWorld.vue
!!vue-style-loader!css-loader?{“sourceMap”:true}…省略…App.vue
…App.vue
常规style的方法：
npm install stylus-loader css-loader style-loader --save-dev

问题2：
npm WARN webpack-cli@requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed
方法：
npm install webpack@4.0.0 -g

Vue初始化过程：
1、安装node.js（安装完，到控制台中输入node -v来检验安装是否成功并查看版本号）。
2、安装淘宝镜像（http://npm.taobao.org），再在控制台中输入npm install cnpm -g --registry=https://registry.npm.taobao.org（cnpm可代替npm），再输入cnpm install -g vue-cli。安装成功后，输入vue回车，出现如下图则安装成功。
在这里插入图片描述
3、初始化项目：在控制台所需建立项目的目录下输入vue init webpack myproject（myproject是自己项目的名字）。然后根据自己的需求建立项目。完成后，根据提示，输入cd XXX(项目文件夹名)回车，然后输cnpm run dev。成功后，会得到一个地址，如下图。
在这里插入图片描述