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

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

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

npm run build 構(gòu)建

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

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

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

3）在入口文件中引入

總結(jié)

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

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