vue-loader配置

最新推荐文章于 2024-09-13 22:20:49 发布

Queen_zdd

最新推荐文章于 2024-09-13 22:20:49 发布

阅读量2.9k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/queen_zdd/article/details/78461326

版权

本文提供了一个详细的Vue-Loader配置教程。从构建项目目录开始，通过安装必要依赖，配置package.json，设置webpack.config.js，创建index.html和main.js，到编写App.vue组件，最后通过cnpm run dev启动开发服务器，展示了一个完整的Vue项目配置流程。在配置过程中，特别提醒了webpack版本匹配和错误处理的问题。

摘要由CSDN通过智能技术生成

本文以一个例子来完成vue-loader的配置

1.首先构建项目目录为：
这里写图片描述
2.使用Git Bash Here从当前vue-loader文件夹打开，出现如下图：

这里写图片描述

3.如果没有安装淘宝npm镜像，可以先输入npm install -g cnpm –registry=https://registry.npm.taobao.org，接着输入cnpm -v查看是否安装完成，然后就可以使用cnpm来代替npm；

4.在命令行输入cnpm init –yes生成配置文件package.json

5.接下来就是通过npm安装项目依赖项，命令行输入：cnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server –save-dev ，运行完成后可继续输入cnpm install vue –save 完成后package.json中会出现如下图配置：（注：将scripts中的内容换成
"scripts": { &#