前言
用vue和webpack实现应该Todo项目，同时对构建过程进行一下小结。参考文档见文末的 Reference。
一、关于包和npm
1 npm
简单来讲，就是 函数——模块脚本——包——库的组成关系，我们开发时，需要引入其他人的第3方包，自己在html文档里一个一个引入太麻烦，所以需要一个集合了很多第3方功能的管理工具，即npm。此外，npm 是依附于 node.js 的。
2 package.json文件
它的作用是：
- 作为一个描述文件，描述了你的项目依赖哪些包
- 允许我们使用 “语义化版本规则”, 指明项目里依赖包的版本
- 让你的构建更好地与其他开发者分享，便于重复使用
创建的方法是,在项目根目录下执行：
npm init
我们要在package.json 文件中指定项目依赖的包，这样别人在拿到这个项目时才可以使用 npm install下载。有了package.json，我们就能让其他人在更方便的下载和使用所有 该项目需要的依赖包。可以这么理解：package.json文件相当于给他人使用时，提供了一份安装所有依赖包的自动下载索引。
包的依赖方式有：
- dependencies：在生产环境中需要用到的依赖;
- devDependencies：在开发、测试环境中用到的依赖
3 安装package
使用 npm 安装 package 有两种方式：
- 本地（当前项目路径）安装 ;
- 全局安装
选择哪种安装方式，决定了将如何使用这个包，其中，
- npm install 默认就是安装到本地的;
- 如果在项目里有 package.json文件，运行 npm install 后它会查找文件中列出的依赖包，然后下载符合语义化版本规则的版本；
- npm install 默认会安装 package.json中 dependencies 和 devDependencies 里的所有模块。
安装参数 --save 和 --save -dev：
添加依赖时我们可以手动修改 package.json 文件，添加或者修改 dependencies devDependencies 中的内容即可。
另一种更酷的方式是用命令行，在使用 npm install 时增加 --save 或者 --save -dev 后缀：
- npm install
- npm install
4 npm run命令
npm 还可以直接运行 package.json中 scripts指定的脚本，具体内容见文末的参考文档。
二、vscode插件配置
1 安装ESlint
主要是用来规范代码风格，配置步骤是：
??S1 VSCode 扩展面板并搜索 ESLint 扩展，然后点击安装;
??S2 npm init + npm install eslint --save-dev；
??S3 在 package.json文件里，设置 script脚本命令；
??S4 运行 script脚本命令，从而创建 检测规则文件 .eslintrc.js；
??S5 运行 script脚本命令，从而运行检测；
??S6 安装 eslint-plugin-html插件，让 ESLint 检测Vue 组件里的JS；
??S7 最后设置一下 vscode，在用户设置中修改 ESLint 的相关配置并保存
2 安装vetur
??S1 VSCode 扩展面板并搜索vetur扩展;
??S2 在用户设置中修改 vetur的相关配置并保存；
二、安装vue和webpack相关依赖
1 安装vue和Webpack
安装Vue：npm install vue --save
安装Webpack：npm install webpack --save-dev
2 安装Webpack里处理vue组件的loader
安装vue-loader:
让webpack可以处理转化vue的组件为—— 浏览器可以识别的JS模块；
npm install --save-dev vue-loader
安装 css-loader 和 vue-template-compiler：
因为vue-loader又 依赖于 第3方的 css-loader 和 vue-template-compiler，所以也需要下载安装他们：
npm install --save-dev css-loader vue-template-compiler
三、新建 .vue项目，开始写vue的组件
略过
四 配置webpack.config.js文件
上文安装了 vue-loader等第3方依赖，接下来就要利用webpack去引入他们。
S1 写vue组件；
S2 把组件绑定到 vue实例上（也是webpack的入口文件）；
S3 设置webpack.config.js文件，配置出入口；
S4 设置webpack.config.js文件，配置相对应文件的 解析loader；
S5 在package.json里设置运行脚本的指令，从而调用webpack
四 Reference
??2 关于 npm 命令使用的好习惯;
??3 Eslint入门教程;
??4 使用 VSCode + ESLint 实践前端编码规范；
??5 ESLint官方文档；
??7 搭建Webpack+Vue项目；
??8 vue-loader是什么；
原文地址：https://www.cnblogs.com/ygming/p/8453255.html