前言
用 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
??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) 的含义;
来源: http://www.bubuko.com/infodetail-2500395.html