vue-loader的概念
其他loader:css-loader、url-loader、html-loader等
先来了解一下模块的概念,比如在nodeJS中,有require
和exports
关键字。
很早有个broserify,是个js模块加载器。
现在流行的是webpack,因为它不光你能加载js文件,还可以是css文件或图片等资源。
webpack,我们可以认为也是更加高级的模块假期,围绕它一切东西都是模块。
这些loader是干嘛的?
我们知道在html中,我们引入css文件是link
标签,
但比如我们需要
- 1
- 1
这还是不太逆天了?其实这就是需要css-loader来处理了。
在Vue开发中,有.vue
文件,vue-loader就是用来加载这类文件的,然后在通过webpack打包编译成我们浏览器认识的代码。vue-loader是基于webpack的。
.vue文件
.vue文件就是放置vue的组件代码,结构如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
项目目录结构
webpack是模块分开写,最后打包在一起。
简单的目录结构如下:
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件(项目依赖、名称、配置),npm init –yes 生成此文件
|-webpack.config.js webpack的配置文件
1.执行:npm init --yes
执行成功之后,项目目录结构如下:
2.webpack配置文件webpack.config.js
,内容如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
webpack准备工作
下载安装:
- 1
- 2
- 1
- 2
安装完成之后,根目录下就会多一个node_modules
文件夹,其中有n多子文件夹。
因为我们前面已经写好了webpack所需的配置文件,这时候在终端执行命令:webpack
就会生成build.js
文件
但在实际开发中,为了更加方便,我们可以做如下配置,修改工程文件package.json
添加scripts:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
这样我们只需要在终端输入:npm run dev
就启动webpack服务模式了;执行npm run b
其实就执行的是webpack
命令。
这就启动了webpack服务模式。
然后我们就可以访问http://localhost:8080/
,就是访问我们的项目。
开始正式编写我们的代码
ES6的模块化开发
导出模块:export default {}
引入模块:import 模块名 from 地址
但ES6的这种语法,现在还有很多浏览器不认识,我们可以通过babel
来转换。
另外.vue
文件也要vue-loader来处理。
所以,我们还需要安装几个webpack的模块(module)
- 1
- 1
最最核心的必须要下载vue:
- 1
- 1
下载babel需要的
- 1
- 1
如果不用ES6的语法,就不需要babel了。
1.babel配置文件,根目录新建.babelrc
文件,内容如下:
- 1
- 2
- 3
- 1
- 2
- 3
然后就可以编写我们的业务代码了
main.js:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
App.vue:
- 1
- 2
- 3
- 1
- 2
- 3