資訊專欄INFORMATION COLUMN
摘要：當(dāng)我們面對復(fù)雜的代碼，當(dāng)我們看到各種配置文件的時候，你是否會為此感到頭疼，是否會覺得心累今天，大家可以跟著我一起，自己來是用構(gòu)建一個基于單頁面的應(yīng)用，廢話不多，立即開始創(chuàng)建項目創(chuàng)建項目需要的基礎(chǔ)文件和文件夾安裝以及一些其他的依賴包配置
當(dāng)我們面對vue-cli 復(fù)雜的代碼，當(dāng)我們看到各種配置文件的時候，你是否會為此感到頭疼，是否會覺得心累？今天，大家可以跟著我一起，自己來是用webpack 構(gòu)建一個基于vue單頁面的應(yīng)用，廢話不多，立即開始：
1.創(chuàng)建項目
npm init
2.創(chuàng)建項目需要的基礎(chǔ)文件和文件夾
3.安裝webpack以及一些其他的依賴包
4.配置webpack-base-config.js
5.在 package.json 里面添加 打包命令，添加 --config 指向 webpack.base.config.js
--在命令面板中輸入 npm run build
--會在項目中生成一個 dist文件夾
--已經(jīng)生成好打包文件，但是只有js，沒有html，
6.引入 html-webpack-plugin 插件，讓webpack把html也打包進(jìn)去
再次執(zhí)行 npm run build 重新生成dist文件夾
html 和 js 都有了，在瀏覽器中打開html
7.在webpack.dev.config.js 中配置 dev-server 構(gòu)建本地node服務(wù)器，添加熱部署功能
8.package.json 中,添加 babel-loader babel-core babel-preset-env 依賴包，支持 es6,添加 server 指令
9.配置 loader ，添加css, js, vue loader，注意，loader加載有先后順序，后加載的放開頭，要先了解每個loader之間的依賴關(guān)系
10.在你的index上添加內(nèi)容 ，在終端輸入 npm run server 瀏覽器自動打開頁面，
-- 修改main.js
--即可看到 瀏覽器上的內(nèi)容
至此，單頁面應(yīng)用已經(jīng)構(gòu)建好了，接下來我們引入vue相關(guān)
11.在 src文件夾下新建 App.vue
----修改 main.js
---- 查看瀏覽器報錯了，
識別不了vue？？ 不是引用了vue-loader嘛
-- 別急，原因是 webpack沒有識別vue模版， 在package.json 中install vue依賴相關(guān)的package
最后，在webpack.dev.config.js 添加 vueloaderplugin 插件
重啟服務(wù)，完事了
貼上git 地址， https://github.com/caojide/we...
轉(zhuǎn)載請注明出處
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107891.html
摘要：我采用原生編寫后臺，因?yàn)楦杏X增刪改查的功能很簡單，就懶得用框架了其實(shí)是不會。瀏覽模式它也有一個，用來切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進(jìn)行文章的撰寫與修改。 介紹 項目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）showImg(https://segmentfault.com/img/b...
好久沒更新過Vue的小文章，上次做了一個基于Vue+Mint-ui的移動端AppDemo,集成了推送功能，然后通過cordova打包生成apk，移動端表現(xiàn)還不錯，今天把這個小東西分享出來，希望有更多的小伙伴能夠用Vue去做一些有意思的東西，本人才疏學(xué)淺，有說的不對的地方，還請大家多多指教。下面按照慣例放上demo地址和源碼地址,希望大家能給我點(diǎn)下star：Demo(進(jìn)去需要先注冊才能登錄,用的lo...
摘要：模塊熱加載是的一個非常碉堡的特性，將會為我們的單頁應(yīng)用帶來極大的便利。這是一個生態(tài)系統(tǒng)中一個偉大創(chuàng)舉。 Vue全家桶 參考 vue-tutorial Vue+Webpack開發(fā)可復(fù)用的單頁面富應(yīng)用教程 Vue+Webpack使用規(guī)范對比其他框架 推薦代碼使用 CommonJS 或 ES6 模塊，然后使用 Webpack 或 Browserify 打包。 你可以使用 Webpack ...
閱讀 1832·2019-08-30 15:55
閱讀 1029·2019-08-26 11:57
閱讀 534·2019-08-26 11:29
閱讀 3376·2019-08-26 10:49
閱讀 1928·2019-08-23 18:40
閱讀 1835·2019-08-23 16:04
閱讀 3122·2019-08-23 11:01
閱讀 2293·2019-08-23 10:56
