vue+webpack入门讲解

前言

用vue和webpack实现应该Todo项目，同时对构建过程进行一下小结。参考文档见文末的 Reference。

一、关于包和npm

1 npm

简单来讲，就是 函数——模块脚本——包——库的组成关系，我们开发时，需要引入其他人的第3方包，自己在html文档里一个一个引入太麻烦，所以需要一个集合了很多第3方功能的管理工具，即npm。此外，npm 是依附于 node.js 的。

2 package.json文件

它的作用是：

1. 作为一个描述文件，描述了你的项目依赖哪些包

2. 允许我们使用 “语义化版本规则”, 指明项目里依赖包的版本
3. 让你的构建更好地与其他开发者分享，便于重复使用

创建的方法是,在项目根目录下执行：

npm init

我们要在package.json 文件中指定项目依赖的包，这样别人在拿到这个项目时才可以使用 npm install下载。有了package.json，我们就能让其他人在更方便的下载和使用所有 该项目需要的依赖包。可以这么理解：package.json文件相当于给他人使用时，提供了一份安装所有依赖包的自动下载索引。

包的依赖方式有：

1. dependencies：在生产环境中需要用到的依赖;

2. devDependencies：在开发、测试环境中用到的依赖

3 安装package

使用 npm 安装 package 有两种方式：

• 本地（当前项目路径）安装 ;
• 全局安装

选择哪种安装方式，决定了将如何使用这个包，其中，

1. npm install 默认就是安装到本地的;

2. 如果在项目里有 package.json文件，运行 npm install 后它会查找文件中列出的依赖包，然后下载符合语义化版本规则的版本；
3. npm install 默认会安装 package.json中 dependencies 和 devDependencies 里的所有模块。

安装参数 --save 和 --save -dev：

添加依赖时我们可以手动修改 package.json 文件，添加或者修改 dependencies devDependencies 中的内容即可。

另一种更酷的方式是用命令行，在使用 npm install 时增加 --save 或者 --save -dev 后缀：

1. npm install <package_name> --save 表示将这个包名及对应的版本添加到 package.json的 dependencies

2. npm install <package_name> --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies

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

  1 npm 与 package.json 快速入门;
  2 关于 npm 命令使用的好习惯;
  3 Eslint入门教程;
  4 使用 VSCode + ESLint 实践前端编码规范；
  5 ESLint官方文档；
  6 Vetur：VSCode下强大的Vue开发工具；
  7 搭建Webpack+Vue项目；
  8 vue-loader是什么；
  9 render: h => h(App) 的含义；