vue+webpack入门讲解

Posted ygming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+webpack入门讲解相关的知识,希望对你有一定的参考价值。

前言

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

一、关于包和npm

1 npm

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

2 package.json文件

它的作用是:

  1. 作为一个描述文件,描述了你的项目依赖哪些包
  1. 允许我们使用 “语义化版本规则”, 指明项目里依赖包的版本
  2. 让你的构建更好地与其他开发者分享,便于重复使用

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

npm init

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

包的依赖方式有:

  1. dependencies:在生产环境中需要用到的依赖;
  1. devDependencies:在开发、测试环境中用到的依赖

3 安装package

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

  • 本地(当前项目路径)安装 ;
  • 全局安装

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

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

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

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

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

  1. npm install
  1. 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) 的含义;

























以上是关于vue+webpack入门讲解的主要内容,如果未能解决你的问题,请参考以下文章

webpack入门——构建简易版vue-cli

webpack+vue+vueRouter模块化构建小demo实例超详细步骤(附截图代码入门篇)

vue-cli入门——项目结构

Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

Vue&webpack入门实践

Vue.js——60分钟webpack项目模板快速入门