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