# Vue+Webpack打造todo应用
备注：老师用的是windows VScode，常用插件安装 首选项，常用设置，File: Auto Save - onFocusChange 当编辑器失去焦点时，将自动保存未保存的编辑器
# 安装
npm init 初始化一个npm的项目 在项目文件夹内，生成一个package.json 文件
npm i webpack vue vue-loader 配置 webpack 和 vue 安装 webpack、vuejs 和 vue-loader 尝试安装 vue-loader (已经安装 webpack、vuejs 了)，文件夹中多出 package-lock.json 文件
⚠️我以为我已经安装了webpack就没按照老师说的安装了， 看到我比老师少了一个文件夹，试着用npm i webpack，才多出来那个一样的文件夹，这是为什么呢？ 因为起一个项目需要局部安装，而我的终端已经在这个文件夹里面了？
拓展：npm i和npm install的区别 https://blog.csdn.net/chern1992/article/details/79193211 实际使用的区别点主要如下(windows下)：
- 用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉
- npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号
- 部分npm包在当前node版本下无法使用，必须使用建议版本
- 安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定
安装 vue-loader 报错 npm WARN vue-loader@15.9.3 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself. 解决： npm i vue-loader css-loader npm i css-loader vue-template-compiler（这vue-template-compiler是老师有报这个错，但我不知道我是否要加，就蛮加了一下）
安装好了， 增加一个src文件夹，作为源码放置的目录， 在src文件夹里面，新建一个文件叫 app.vue
VsCode中使用Emmet神器快速编写HTML代码 请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!
# 配置
vue-loadwr + webpack 项目配置
vue组件并不能直接在浏览器里面展示。要怎么看效果呢？ 在项目文件夹内，建一个 webpack.config.js 文件 首先配置 module.exports = {}
webpack 是用来帮我们打包前端资源的。 以js文件作为入口，js加载到浏览器端之后，把所有内容给渲染出来
entry 声明入口，用绝对路径，不易出错。 path 是nodejs里的一个基本包，用来处理路径
在 src 文件夹里面 再建立一个 index.js ，这个index.js 才是我们真正的入口文件
( 打包成一个js文件和模块依赖的好处： 减少http请求； 模块依赖可复用。 )
.vue是组件，不能直接在html里面渲染。我们要把这个组件挂载到入口文件 index.js 里面去 怎么挂载呢？ import Vue from 'vue' //把vue这个类库引用进来 配置 index.js 和 webpack.config.js文件， ⚠️请看我自己跟做的例子 和 写在例子里面的注释，如下：