美文网首页
vue+webpack学习笔记一

vue+webpack学习笔记一

作者: 咩也都唔识 | 来源:发表于2018-08-12 17:59 被阅读0次

今天开始学习组合使用vue+webpack,不过由于教学视频版本和当前版本不一致,所以我主要是为记录遇到的问题以及如何解决他们。(可以直接拉倒文章末尾查看总结)


放上今天的猪脚代码。

1.先使用npm init,初始化为一个npm项目,其中,需要手动写一些项目信息,这里我全选择默认。

结果就生成了一个package.json文件

2.按照需要使用的npm包猪脚webpack+vue,代码是npm i webpack vue vue-loader vue-template-compiler css-loader 

3.创建源文件夹,顺手放上测试用例app.vue,index.js

app.vue index.js

4.然后配置webpack.config.js

webpack.config.js

完成代码部署,就尝试运行,npm run dev,但是报错了

报错截图

如果将代码进行修改成这样

修改后

运行就正常了


总结

vue-loader@15.*之后除了必须带有VueLoaderPlugin 之外,还需另外单独配置css-loader。

相关文章

  • vue+webpack学习笔记一

    今天开始学习组合使用vue+webpack,不过由于教学视频版本和当前版本不一致,所以我主要是为记录遇到的问题以及...

  • Vue项目实例参考

    1. 参考文档 原教程地址 vue+webpack项目实战 vue+webpack app项目(1) https:...

  • webpack4配置vue环境出现的问题

    通过学习慕课网Vue+Webpack打造todo应用这门课程的学习,已经完成了基本配置,运行npm run dev...

  • 如何安装vue

    1、vue+webpack安装,生成初始化vue项目vue+webpack安装,生成初始化vue项目_前端劝退师儿...

  • 手动构建vue+webpack遇到的各种坑。。。

    最近由于项目需要,自己开始着手于vue+webpack的学习。作为前端的小白,自己在学习的路上走的太艰难,以下是我...

  • webpack4配置vue环境

    关于这个webpack4配置vue环境主要是通过学习慕课网Vue+Webpack打造todo应用的课程,然后一步一...

  • Vue+Webpack打造TODO应用(备注版)

    最近跟着慕课网学习入门Webpack,该文章基本参考Vue+Webpack打造todo应用该课程,仅在代码上添加了...

  • vue+webpack构建项目(小白)

    之前自学过vue,构建项目直接用vue-cli,最近在学习如何自己构建项目,于是就选择了vue+webpack(本...

  • vue+webpack学习之路(入门)

    一. 安装nodejs,这个网上已经有很多教程就不多说了,按照默认配置安装以后node里会自带npm包管理工具 (...

  • vue+webpack学习之路(基础)

    一. vue要求我们转变像jquery一样直接操作dom的思想,拥抱数据驱动的思想,例如,需要操作列表中其中一个元...

网友评论

      本文标题:vue+webpack学习笔记一

      本文链接:https://www.haomeiwen.com/subject/soosbftx.html