-
2-2(6) 1)在入口文件(index.js)中導(dǎo)入test.stylus.styl文件； 2)執(zhí)行打包命令:npm run build 如下圖查看全部
-
2-2(5)新建test.stylus.styl文件，在這個(gè)文件中，既可以以縮進(jìn)的形式編寫CSS樣式(如下圖)，也可以編寫傳統(tǒng)的CSS樣式形式。查看全部
-
2-2(4)配置css資源預(yù)處理loader,如下圖:查看全部
-
2-2(3)執(zhí)行webpack打包命令: npm run build 可以看到，dist目錄下輸出了圖片靜態(tài)資源，如下圖所似。通過(guò)查看bundle.js文件，發(fā)現(xiàn)css文件內(nèi)容已經(jīng)被打包到bundle.js文件中。查看全部
-
2-2(2)在打包入口文件(index.js)中使用關(guān)鍵字import導(dǎo)入靜態(tài)資源文件(css、image)，如下圖:查看全部
-
2-2(1)上一節(jié)使用webpack成功打包編譯了js文件，當(dāng)然，除了js文件之外，webpack可以打包一切前端靜態(tài)資源，只需完成以下幾個(gè)步驟: 1)webpack.config.js中配置相應(yīng)的打包規(guī)則，可以仿照上一節(jié)配置打包js文件的的規(guī)則來(lái)配置其他靜態(tài)資源的打包規(guī)則； 2)使用npm安裝對(duì)應(yīng)的 loader【如下圖】； 3)在項(xiàng)目中引入其他靜態(tài)資源； 4)執(zhí)行webpack打包命令:npm run build查看全部
-
2-1(8)再次執(zhí)行打包命令: npm run build 可以看到，這次打包成功，輸出目標(biāo)文件 dist/bundle.js文件，這個(gè)通過(guò)<script>標(biāo)簽引入到htr文件中，然后在瀏覽器執(zhí)行。 (注:視頻中沒有演示在瀏覽器中執(zhí)行bundle.js)查看全部
-
2-1(7)根據(jù)錯(cuò)誤提示，在webpack.config.js文件中添加處理單文件組件的規(guī)則的配置，如下圖所示，這段配置規(guī)則的作用是: 使用 vue-loader來(lái)處理以 .vue結(jié)尾的文件，它是一個(gè)正則表達(dá)式匹配規(guī)則。查看全部
-
2-1(6) 使用webpack執(zhí)行打包: 1)首先在npm項(xiàng)目的配置文件(package.json)文件中添加webpack運(yùn)行打包的相關(guān)配置,添加下面這一行配置: "build":"webpack --config webpack.config.js" 這行配置的作用是: 在執(zhí)行webpack打包命令時(shí)，使用的是本項(xiàng)目安裝的webpack版本，而如果沒有這行配置，直接執(zhí)行打包命令，使用的是全局安裝的webpack版本。 2)執(zhí)行webpack打包命令: npm run build查看全部
-
2-1(5) webpack的配置詳情，如圖:查看全部
-
2-1(5) 很顯然，上一步創(chuàng)建的app.vue組件無(wú)法直接在瀏覽器中運(yùn)行的，需要webpack工具進(jìn)行打包編譯，所以: 1)新建webpack打包入口文件: index.js 2)新建webpack配置文件:webpack.config.js 3)配置webpack打包的輸入文件為index.js ,輸出目標(biāo)為: dist/bundle.js，webpack在打包時(shí)會(huì)自動(dòng)創(chuàng)建bundle.js文件，bundle.js文件可以直接在瀏覽器中運(yùn)行。查看全部
-
2-1(4) 新建src目錄作為項(xiàng)目源碼放置目錄，在src目錄下創(chuàng)建一個(gè)vue組件: app.vue查看全部
-
2-1(3) 根據(jù)上一步的警告提示，安裝相應(yīng)的css-loader和vue-template-compiler 從截圖中可以看到老師安裝的vue的版本為vue@2.5.13查看全部
-
2-1(2)安裝Vue 、Vue-loader查看全部
-
2-1(1) 初始化項(xiàng)目: npm init 說(shuō)明: 初始化一個(gè)npm項(xiàng)目，回車之后，出現(xiàn)的選項(xiàng)一路默認(rèn)即可。查看全部
舉報(bào)
0/150
提交
取消