webpack中配置vue

1、初始化

npm init -y

之后会生成package.json文件

2、安装webpack

npm install webpack webpack-cli

会生成node_modules目录

3、安装vue

npm install vue

4、测试

在这里插入图片描述

执行:npm run build

会报如下错误:
在这里插入图片描述

解决方法:

import Vue from 'vue/dist/vue.js'

5、安装vue-loader

webpack只能打包.js文件,要想打包.vue文件,需要安装vue-loader

npm install vue-loader vue-template-compiler

安装完后发现有警告,需要安装css-loader
在这里插入图片描述
npm install css-loader

需要注意的是:vue-loader@15版本后,需要在webpack中添加一个插件

配置文件如下:

在这里插入图片描述

ps

目录结构:
在这里插入图片描述

index.js:
在这里插入图片描述

app.vue:

index.html:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44645309/article/details/113664717
今日推荐