脚本宝典收集整理的这篇文章主要介绍了

使用webpack手动搭建一个基于vue的单页面应用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

当我们面对vue-cli 复杂的代码,当我们看到各种配置文件的时候,你是否会为此感到头疼,是否会觉得心累?今天,大家可以跟着我一起,自己来是用webpack 构建一个基于vue单页面的应用,废话不多,立即开始:

1.创建项目

npm init 
  

2.创建项目需要的基础文件和文件夹

3.安装webpack以及一些其他的依赖包

4.配置webpack-base-config.js

5.在 package.json 里面添加 打包命令,添加 --config 指向 webpack.base.config.js

--在命令面板中输入 npm run build
--会在项目中生成一个 dist文件夹
图片描述

--已经生成好打包文件,但是只有js,没有html,

6.引入 html-webpack-plugin 插件,让webpack把html也打包进去

clipboard.png

再次执行 npm run build 重新生成dist文件夹

clipboard.png

html 和 js 都有了,在浏览器中打开html

clipboard.png

7.在webpack.dev.config.js 中配置 dev-server 构建本地node服务器,添加热部署功能

8.package.json 中,添加 babel-loader babel-core babel-preset-env 依赖包,支持 es6,添加 server 指令

9.配置 loader ,添加css, js, vue loader,注意,loader加载有先后顺序,后加载的放开头,要先了解每个loader之间的依赖关系

10.在你的index上添加内容 ,在终端输入 npm run server 浏览器自动打开页面,

-- 修改main.js

使用webpack手动搭建一个基于vue的单页面应用-脚本宝典
--即可看到 浏览器上的内容

clipboard.png


至此,单页面应用已经构建好了,接下来我们引入vue相关

11.在 src文件夹下新建 App.vue

----修改 main.js

使用webpack手动搭建一个基于vue的单页面应用-脚本宝典
---- 查看浏览器报错了,

识别不了vue?? 不是引用了vue-loader嘛

-- 别急,原因是 webpack没有识别vue模版, 在package.json 中install vue依赖相关的package

最后,在webpack.dev.config.js 添加 vueloaderplugin 插件

clipboard.png

重启服务,完事了

使用webpack手动搭建一个基于vue的单页面应用-脚本宝典
贴上git 地址, https://github.com/caojide/we...
转载请注明出处

总结

以上是脚本宝典为你收集整理的

使用webpack手动搭建一个基于vue的单页面应用

全部内容,希望文章能够帮你解决

使用webpack手动搭建一个基于vue的单页面应用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过