webpack+vue實現(xiàn)TODO慕課網(wǎng)課程筆記

• 課程目的：
  前端工程：講明一些前端基礎(chǔ)的概念；如何搭建一個工程，一個工程解決了哪些問題
  webpack：預(yù)計未來前端開發(fā)必備的基礎(chǔ)
  vue：相對于react使用比較簡單方便，vue開發(fā)者提供了開發(fā)文檔，屬于官方發(fā)布，比較穩(wěn)定，功能全面
• 課程目標：
  配置開發(fā)時的前端工程
  實現(xiàn)一個簡單的TODO應(yīng)用
  優(yōu)化配置達到線上標準
• 前端衡量自己的價值：
  會搭建前端工程
  網(wǎng)絡(luò)優(yōu)化
  API定制（基于前后端分離，都是通過API聯(lián)系的，我們需要了解一下后端的API的基礎(chǔ)概念）
  Nodejs層（基本使用，如何去寫一個腳本）
• 開始配置項目：
  （1）初始化鮮項目：
  ctrl + ~ 打開終端
  npm init 初始化項目，項目新增package.jso
  npm i webpack vue vue–loader 安裝依賴
  npm i css-loader vue-template-compiler 根據(jù)上面安裝提示把這些依賴裝上
  （2）配置項目目錄
  1）新建src源碼文檔
  2）新建一個App.vue組件
  
  3）新建一個入口文件index.js
  
  4）新建一個webpack.config.js幫我們打包前端資源
  

寫入項目安裝的webpack，否則會自動采用全局的版本來構(gòu)建

npm run build 構(gòu)建

（3）webpack配置項目加載各種靜態(tài)資源及CSS預(yù)處理器
裝上 npm i style-loader url-loader file-loader

加上它們各自的處理規(guī)則

2）src下新增圖片樣式目錄和文件

3）在入口文件中引入

總結(jié)

以上是生活随笔為你收集整理的webpack+vue实现项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。