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