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

maybe_009 发布于2019-08-26 11:57 / 1005人阅读

摘要：当我们面对复杂的代码，当我们看到各种配置文件的时候，你是否会为此感到头疼，是否会觉得心累今天，大家可以跟着我一起，自己来是用构建一个基于单页面的应用，废话不多，立即开始创建项目创建项目需要的基础文件和文件夹安装以及一些其他的依赖包配置

当我们面对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也打包进去

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

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

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

--即可看到浏览器上的内容

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

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

----修改 main.js

---- 查看浏览器报错了，

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

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

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

重启服务，完事了

贴上git 地址， https://github.com/caojide/we...
转载请注明出处

GPU云服务器云服务器 webpack使用 webpack 使用公用cdn webpack搭建 vue.js多页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107891.html

采用vue+webpack构建的单页应用——私人博客MintloG诞生记

摘要：我采用原生编写后台，因为感觉增删改查的功能很简单，就懒得用框架了其实是不会。浏览模式它也有一个，用来切换文章列表和文章详情，也就是和编辑模式它加载了作为工具栏，然后可以进行文章的撰写与修改。介绍项目地址：https://github.com/jrainlau/MintloG （特别乱，参考就好-_-|||）showImg(https://segmentfault.com/img/b...

Terry_Tai 2019-06-27 12:09 评论0 收藏0
基于Vue2全家桶的移动端AppDEMO实现

好久没更新过Vue的小文章，上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能，然后通过cordova打包生成apk，移动端表现还不错，今天把这个小东西分享出来，希望有更多的小伙伴能够用Vue去做一些有意思的东西，本人才疏学浅，有说的不对的地方，还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能给我点下star：Demo(进去需要先注册才能登录,用的lo...

Jiavan 2019-08-20 13:58 评论0 收藏0
Vue + Webpack 实践

摘要：模块热加载是的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。这是一个生态系统中一个伟大创举。 Vue全家桶参考 vue-tutorial Vue+Webpack开发可复用的单页面富应用教程 Vue+Webpack使用规范对比其他框架推荐代码使用 CommonJS 或 ES6 模块，然后使用 Webpack 或 Browserify 打包。你可以使用 Webpack ...

fsmStudy 2019-08-20 11:19 评论0 收藏0