vue-loader和webpack项目配置及npm错误问题的解决
作者：树?叶? 发布时间：2024-04-29 13:10:33
vue-loader和webpack项目配置及npm错误
学习vue的同学都知道，想要生成一个vue项目，使用vue-cli脚手架工具直接生成项目即可，但是小编为了更加明白vue项目中一些项目文件的真正含义，从空文件开始构建项目，其中还包括webpack的一些知识点
1、在VS编辑器打开终端，npm init初始化，生成package.json文件
2、安装项目中所需要用到的包，例如webpack 、 vue 、 vue-loader等
使用命令npm i webpack vue vue-loader进行安装，如果此时报错，可以一个一个的进行安装，npm i webpack 、npm i vue 、npm i vue-loader
如果新建过程中出现以下错误：
可以看一下package.json下的name字段是不是项目名字和你安装的那个包名字相同了，如果一样就会报那个错，把项目名字改成和安装不冲突的名字
正确的运行结果应该是：
3、继续安装css-loader以及vue-template-compiler
npm i css-loader vue-template-compiler
4、新建src文件夹，新加app.vue，进行编写基本的代码
5、此时的文件是不可能进行编译的，但是当我们想要运行此项目时，可以使用webpack，webpack是一个打包器；
在根目录下建立webpack.config.js，并在里面添加配置
entry是我们这个项目文件的一个入口文件，output是打包以后的输出文件，__dirname 是表示当前文件的名字，module里面是一些loader配置
6、入口文件index.js文件也进行简单的编辑：
7、最后进行运行npm run build
根据webpack.config.js的配置，会在根目录生成一个文件夹dist，里面是输出的一些文件。
到这里，我们的项目配置就完成了！！
解决vue-loader webpack版本出现的问题
出现问题
问题描述
主要是webpack打包时出现问题报错如上
发现vue-loader 和 vue-template-compiler 版本不匹配
解决方法
npm instll
npm update
之后再运行就解决了
来源：https://blog.csdn.net/tangyuer/article/details/100188830
0
投稿猜你喜欢
- 之前对bottle做过不少的介绍，也写过一些文章来说明bottle的缺点，最近发现其实之前有些地方说的不太公平，所以趁此机会也来更正一下。&
我们提倡无论何时都尽可能地使用CSS,这样我们更容易取得成功.现在浏览器对CSS的支持已经非常好,肯定足以让你用来控制你的网页布局与排版.但- 关系型数据库：以表作为实体，以主键和外键关系作为联系的一种数据结构。主键：在关系型数据库中，用一个唯一的标识符来标志每一行，这个标识符就是主
- ASP（英文全称Active Server Pages）是一个编程环境，在其中，可以混合使用HTML、脚本语言以及组件来创建服务器端功能强大
- Go语言中有缓冲的通道（buffered channel）是一种在被接收前能存储一个或者多个值的通道。这种类型的通道并不强制要求 gorou
- 反向传递法则是深度学习中最为重要的一部分，torch中的backward可以对计算图中的梯度进行计算和累积这里通过一段程序来演示基本的bac
- 无限分类是实际开发中经常用到的一种数据结构，一般我们称之为树形结构。题设：类似淘宝的商品分类，可以在任意分类设置其子类。 一、创建
- （代码片断试验成功，成功上传！） 因为昨天想起来学习一下PHP代码的冲动，是来源于像模仿着做一个类似公司IMAGE LIBRARY的东西出来
- 本文总结了input的各种使用方法，挺全面的1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus
- 当用户的页面需要动态加载iframe 时， 如果iframe的src中包传中文参数会出现编码错误；必须加编码，然后再解码。 编码：encod
- Unittestunittest大家应该都不陌生。它作为一款博主在5-6年前最常用的单元测试框架，现在正被pytest，nose慢慢蚕食。渐
- 最近迷上了Python，要说为什么呢？Python语法简单，功能强大，有广泛的第三方库能快速编程实现自己的想法（无需重复去造轮子）。就像某位
- 本文实例讲述了PHP实现二维数组中的查找算法。分享给大家供大家参考，具体如下：方法1：silu从左下角最后一行的第一个元素开始，遍历。如果小
- 使用Numpy创建三维矩阵创建语句#创建形式有两种#1 随机数形式np.random.random((x,y,z))#2 0或1形式np.o
- 如果MySQL服务器启用了二进制日志，你可以使用mysqlbinlog工具来恢复从指定的时间点开始 (例如，从你最后一次备份)直到现在或另一
- 本文主要介绍使用Python调用ADB命令实现实时监控logcat关键字的功能采用多进程，可同时监控多个设备，监控多个关键字。需要配置ADB
- 看代码吧~def find_all_index(arr, item): return [i for i, a in
- 1. 绝对路径引入Python 在搜索模块时，依次搜索sys.path里的位置，直到找到模块为止。下面命令可以查看当前的搜索路径：impor
- 那么Python如何快速上手？找来了一篇广受好评的新语言学习方法介绍，供大家参考。听说，你决定要为你的 “技能树” 再添加一门特定的编程语言
- 体系结构 Microsoft按照客户/服务器体系结构的分布进行操作。这种方法产生不必要的代价和复杂性。在Internet中，Oracle已经
