資訊專(zhuān)欄INFORMATION COLUMN
摘要：或許有人會(huì)覺(jué)得現(xiàn)在項(xiàng)目里面還沒(méi)有目錄和文件，程序無(wú)法順利輸出。實(shí)際上，屬性中定義的路徑如果沒(méi)有的話(huà)，會(huì)自動(dòng)創(chuàng)建的打開(kāi)文件添加一句有使用過(guò)腳手架的都知道這句話(huà)，這里添加的這個(gè)指令，就是我們?cè)诮K端輸入之后幫我們干的一些事情。
我們先來(lái)用 npm init 來(lái)初始化項(xiàng)目
因?yàn)槲覀冇玫搅藇ue以及webpack，所以我們需要將這兩個(gè)依賴(lài)包安裝一下，除了這些呢，還有段落標(biāo)題中的vue-loader，這個(gè)就是為了用webpack加載.vue文件，并將它編譯成瀏覽器能認(rèn)識(shí)的js文件
安裝vue-loader的同時(shí)需要再安裝
然后新建一個(gè)src文件夾 用來(lái)存放源文件，再新建app.vue模板文件
app.vue代碼
如何讓瀏覽器識(shí)別vue文件呢？那就需要webpack了
配置webpack我們工程總得有個(gè)入口文件，讓瀏覽器去訪(fǎng)問(wèn)，讓webpack去打包并輸出。現(xiàn)在就來(lái)配置webpack的入口和出口。
在src目錄下新建一個(gè)main.js的文件作文工程的入口文件。
代碼內(nèi)容：
配置完入口后就要配置出口了。我們新建一個(gè)webpack.config.js，在里面里配上entry入口和out出口，表示webpack文件會(huì)將將entry路徑下的文件，打包到out的路徑
以上就是做了這樣一件事，將src下的main.js文件以js的形式打包到dist目錄下的bundle.js中去?；蛟S有人會(huì)覺(jué)得現(xiàn)在項(xiàng)目里面還沒(méi)有dist目錄和bundle.js文件，程序無(wú)法順利輸出。實(shí)際上，out屬性中定義的路徑如果沒(méi)有的話(huà)，webpack會(huì)自動(dòng)創(chuàng)建的
打開(kāi)package.json文件添加一句:
webpack --config webpack.config.js
有使用過(guò)腳手架的都知道npm run build 這句話(huà)，這里添加的這個(gè)指令，就是我們?cè)诮K端輸入npm run build之后webpack幫我們干的一些事情。而webpack --config webpack.config.js這句的意思就是webpack去幫我們執(zhí)行我們新建的webpack.config.js文件
現(xiàn)在先試一下執(zhí)行npm run build，然后接著輸入yes就好了
安裝后我們?cè)?b>npm run build一次，就會(huì)出現(xiàn)已報(bào)錯(cuò)
這個(gè)錯(cuò)誤是告訴我們，需要為app.vue這個(gè)文件聲明一個(gè)loader，因?yàn)閣ebpack只支持js類(lèi)型的文件，像這種vue文件是不支持的，所以我們要使用一些工具，來(lái)幫助它認(rèn)識(shí)超出它理解范疇的語(yǔ)法。這個(gè)時(shí)候就需要Module了
Module在webpack.config.js里添加module配置項(xiàng)
好添加完成之后，再次執(zhí)行 npm run build 指令。
好的又報(bào)錯(cuò)了，這是要我們安裝vue-template-compiler依賴(lài)
輸入指令npm i vue-template-compiler
同時(shí)我們還要安裝依賴(lài)style-loader來(lái)解析css
npm i style-loader
webpack并沒(méi)有處理css的能力，所以我們還需要在moudle添加rules配置項(xiàng)，如下
配置后我們?cè)俅螆?zhí)行 npm run build 指令。這一次終于成功了
webpack配置項(xiàng)目加載各種靜態(tài)資源及css預(yù)處理器 1. 靜態(tài)資源在上面，我們接觸了css樣式加載
接下來(lái)我們要配置加載圖片了。我們加載圖片用到的loader叫‘url-loader’,它的作用是將我們的圖片轉(zhuǎn)換成一個(gè)base64的字串存放于我們打包生成的js里面，而不是重新生成一個(gè)文件。對(duì)于一些小的文件，幾kb的文件可以幫助我們減少過(guò)多的http請(qǐng)求。那么url-loader其實(shí)封裝了我們的file-loader，file-loader其實(shí)是將文件進(jìn)行處理后換個(gè)名字存放于另一個(gè)地方。那么我們先看下配置：
我們這里同樣使用的use屬性，不同的是數(shù)組里面使用的對(duì)象，因?yàn)槲覀儗?duì)圖片還需要進(jìn)行一些更細(xì)化的配置，像圖片的大小(limit)，文件名稱(chēng)(name)有時(shí)都是需要進(jìn)行配置的，所以這里使用了對(duì)象。當(dāng)然，我們需要把使用到的loader安裝一下。
npm i url-loader file-loader
接下來(lái)我們新建一個(gè)assets目錄，然后放幾張圖片進(jìn)去，并同時(shí)新建一個(gè)css目錄新建一個(gè)test樣式
css代碼：
并且將我們項(xiàng)目的入口文件添加幾行代碼：
我們現(xiàn)在執(zhí)行一下npm run build 指令，可以看到webpack將圖片打包成base64字串存放于js中，并且重新生成了新的文件
打開(kāi)bundle.js
圖片被編譯成了base64字串
在這里我們用stylus處理器，安裝命令。注意記得安裝stylus-loader
npm i stylus-loader stylus
新建一個(gè)stylus文件
然后將這個(gè)styl文件在入口文件中引用進(jìn)來(lái)
接著我們就可以編譯一下，繼續(xù)執(zhí)行npm run build 指令編譯
我們之前寫(xiě)的font-size成功編譯在bundle.js里面了
webpack配置webpack-dev-server這個(gè)包是咱們?cè)陂_(kāi)發(fā)環(huán)境用的包處理工具，我們這里先install這個(gè)包。
npm i webpack-dev-server
然后再package.json配置
"dev": "webpack-dev-server --config webpack.config.js"
添加完dev指令后需要到webpack.config.js下修改一部分內(nèi)容來(lái)專(zhuān)門(mén)適應(yīng)我們的開(kāi)發(fā)環(huán)境。接下來(lái)我們需要區(qū)分全局的一個(gè)環(huán)境，很容易就想到需設(shè)置一個(gè)全局的環(huán)境變量來(lái)做區(qū)分控制，我們?cè)赽uild指令后面添加代碼
注：我們?nèi)绻幌雲(yún)^(qū)分不同系統(tǒng)，寫(xiě)一套代碼來(lái)適應(yīng)多個(gè)系統(tǒng)，需要安裝cross-env模塊，并使用他
這里完成之后我們就可以在webpack.config.js文件里面進(jìn)行判斷了。
webpack.config.js文件里面進(jìn)行判斷了
overlay屬性是在我們編譯的過(guò)程中能夠讓任何的錯(cuò)誤都顯示到網(wǎng)頁(yè)上面。最后我們加完了這些基礎(chǔ)的配置之后回過(guò)頭來(lái)發(fā)現(xiàn)，我們好像配置的只是js、css、img文件，沒(méi)有html頁(yè)面去容納它們。這個(gè)時(shí)候我們用到一個(gè)webpack的一個(gè)插件html-webpack-plugin,我們照樣來(lái)安裝一下它：npm i html-webpack-plugin
這里我們用到了webpack，所以需要將 webpack 這個(gè)變量引用進(jìn)來(lái)。
到這里我們基本的配置就完成了，最后需要了解一下webpack.DefinePlugin，我們?cè)诖a中的plugin里添加：
說(shuō)到這里，理論上我們已經(jīng)完成的本地開(kāi)發(fā)環(huán)境的編譯
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104008.html
摘要：后來(lái)經(jīng)過(guò)排查你會(huì)發(fā)現(xiàn)是由于目前還沒(méi)有版本?？梢允褂迷摲绞浇鉀Q。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進(jìn)階中級(jí)的初級(jí)前端人員。 最近在知乎看到一個(gè)問(wèn)題，原問(wèn)題如下： 很奇怪，為什么現(xiàn)在能找到自己手動(dòng)創(chuàng)建vue腳手架的文章非常少，而且大家似乎對(duì)webpack4的熱情并不高，對(duì)于想基于vue2.0+webpack4搭建一個(gè)腳手架的我來(lái)說(shuō)資料真是少得可憐。難道現(xiàn)在一般的做...
摘要：查看安裝是否正常回車(chē)后看到輸出當(dāng)前安裝的版本號(hào)，例如，即安裝正常通過(guò)以上步聚，說(shuō)明已經(jīng)安裝完并能正常運(yùn)行。再次用腳手架搭建項(xiàng)目第二步將模塊安裝完成后，就可以使用以下命令創(chuàng)建項(xiàng)目了。 前言 世間萬(wàn)難 無(wú)非一拖二懶三不讀書(shū) 對(duì) 說(shuō)的就是我 突然覺(jué)得這句話(huà)說(shuō)的很對(duì)，自從上次寫(xiě)完nodejs安裝及npm全局模塊路徑的設(shè)置已經(jīng)過(guò)去兩月有余，而我的vue框架學(xué)習(xí)也就止步于此。還是沒(méi)有給自己施加壓力...
摘要：那該怎么管理這兩個(gè)不同的項(xiàng)目呢解決子模塊用的的同學(xué)肯定一下子就想到子模塊的知識(shí)了。最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議原文地址從零開(kāi)始做前端架構(gòu)腳手架參考資料官方文檔使用定制前端腳手架別人寫(xiě)的腳手架文件操作相關(guān)文檔子模塊 前言 相信很多人都用過(guò)vue-cli或create-react-app或者類(lèi)似的腳手架。腳手架方便我們復(fù)制，粘貼，或者clone代碼庫(kù)，而且還可以更具用...
摘要：提前申明注意自己對(duì)腳手架的理解和認(rèn)識(shí)，很多東西和理解都是形象上的手法，并不專(zhuān)業(yè)和官方一種項(xiàng)目構(gòu)建工具，可以將和壓縮成一個(gè)文件。之后使用項(xiàng)目名進(jìn)入項(xiàng)目根目錄，使用來(lái)自動(dòng)安裝項(xiàng)目依賴(lài)。 提前申明 注意：自己對(duì)vue腳手架的理解和認(rèn)識(shí)，很多東西和理解都是形象上的手法，并不專(zhuān)業(yè)和官方 webpack 一種項(xiàng)目構(gòu)建工具，可以將css和js壓縮成一個(gè)文件。此外，可以提供測(cè)試用服務(wù)器。使用webpa...
摘要：下面來(lái)就來(lái)講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問(wèn)題，要求版本是。想用安裝，就必須用安裝一下。 前言 Vue作為前端三大框架（Angular，React，Vue）之一，號(hào)稱(chēng)是最簡(jiǎn)單，最容易上手的框架，同時(shí)也是行內(nèi)的大趨勢(shì)，還可以用來(lái)開(kāi)發(fā)最火的小程序。具有開(kāi)發(fā)快，雙向數(shù)據(jù)流等特點(diǎn)，有些人認(rèn)為Vue是Angular和Reac...
摘要：下面來(lái)就來(lái)講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問(wèn)題，要求版本是。想用安裝，就必須用安裝一下。 前言 Vue作為前端三大框架（Angular，React，Vue）之一，號(hào)稱(chēng)是最簡(jiǎn)單，最容易上手的框架，同時(shí)也是行內(nèi)的大趨勢(shì)，還可以用來(lái)開(kāi)發(fā)最火的小程序。具有開(kāi)發(fā)快，雙向數(shù)據(jù)流等特點(diǎn)，有些人認(rèn)為Vue是Angular和Reac...
閱讀 3063·2023-04-26 00:40
閱讀 2408·2021-09-27 13:47
閱讀 4267·2021-09-07 10:22
閱讀 2974·2021-09-06 15:02
閱讀 3322·2021-09-04 16:45
閱讀 2507·2021-08-11 10:23
閱讀 3612·2021-07-26 23:38
閱讀 2908·2019-08-30 15:54
