使用webpack手動搭建一個基于vue的單頁面應用

maybe_009 發布于2019-08-26 11:57 / 1017人閱讀

摘要：當我們面對復雜的代碼，當我們看到各種配置文件的時候，你是否會為此感到頭疼，是否會覺得心累今天，大家可以跟著我一起，自己來是用構建一個基于單頁面的應用，廢話不多，立即開始創建項目創建項目需要的基礎文件和文件夾安裝以及一些其他的依賴包配置

當我們面對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...
轉載請注明出處

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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