webpack+vue实现TODO慕课网课程笔记

• 课程目的：
  前端工程：讲明一些前端基础的概念；如何搭建一个工程，一个工程解决了哪些问题
  webpack：预计未来前端开发必备的基础
  vue：相对于react使用比较简单方便，vue开发者提供了开发文档，属于官方发布，比较稳定，功能全面
• 课程目标：
  配置开发时的前端工程
  实现一个简单的TODO应用
  优化配置达到线上标准
• 前端衡量自己的价值：
  会搭建前端工程
  网络优化
  API定制（基于前后端分离，都是通过API联系的，我们需要了解一下后端的API的基础概念）
  Nodejs层（基本使用，如何去写一个脚本）
• 开始配置项目：
  （1）初始化鲜项目：
  ctrl + ~ 打开终端
  npm init 初始化项目，项目新增package.jso
  npm i webpack vue vue–loader 安装依赖
  npm i css-loader vue-template-compiler 根据上面安装提示把这些依赖装上
  （2）配置项目目录
  1）新建src源码文档
  2）新建一个App.vue组件
  
  3）新建一个入口文件index.js
  
  4）新建一个webpack.config.js帮我们打包前端资源
  

5. 写入项目安装的webpack，否则会自动采用全局的版本来构建
   
6. npm run build 构建
   

（3）webpack配置项目加载各种静态资源及CSS预处理器
装上 npm i style-loader url-loader file-loader

1. 加上它们各自的处理规则
   
   2）src下新增图片样式目录和文件
   
   3）在入口文件中引入