-
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
提交
取消