vue-loader

vue-loader的概念

其他loader：css-loader、url-loader、html-loader等 
先来了解一下模块的概念，比如在nodeJS中，有require和exports关键字。

很早有个broserify，是个js模块加载器。 
现在流行的是webpack，因为它不光你能加载js文件，还可以是css文件或图片等资源。 
webpack，我们可以认为也是更加高级的模块假期，围绕它一切东西都是模块。

这些loader是干嘛的？ 
我们知道在html中，我们引入css文件是link标签， 
但比如我们需要

require('style.css')
1
1

这还是不太逆天了？其实这就是需要css-loader来处理了。

在Vue开发中，有.vue文件，vue-loader就是用来加载这类文件的，然后在通过webpack打包编译成我们浏览器认识的代码。vue-loader是基于webpack的。

.vue文件

.vue文件就是放置vue的组件代码，结构如下：

<template> //html</template><style>//css</style><script>//js</script>
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，内容如下：

module.exports = {    //入口文件    entry:'./main.js',     //出口    output:{        path:__dirname,        filename:'build.js' //打包之后的文件,html模板中引入此文件    },};
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

webpack准备工作

下载安装:

npm install webpack --save -devnpm install webpack-dev-server --save -dev
1
2
1
2

安装完成之后，根目录下就会多一个node_modules文件夹，其中有n多子文件夹。

因为我们前面已经写好了webpack所需的配置文件，这时候在终端执行命令：webpack 就会生成build.js 文件 
 
但在实际开发中，为了更加方便，我们可以做如下配置，修改工程文件package.json添加scripts：

  "scripts": {    "dev": "webpack-dev-server --inline --hot",    "b": "webpack"  },
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)

npm install vue-loader vue-html-loader css-loader style-loader file-loader   --save -dev
1
1

最最核心的必须要下载vue：

npm install vue vue-template-compiler --save -dev
1
1

下载babel需要的

npm install babel-cli babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save -dev
1
1

如果不用ES6的语法，就不需要babel了。

1.babel配置文件，根目录新建.babelrc文件，内容如下：

{    "presets":["es2015"]}
1
2
3
1
2
3

然后就可以编写我们的业务代码了 
main.js:

//引入Vueimport Vue from 'vue';//引入组件import App from './App.vue';//实例化Vuenew Vue({    el:'body',    components:{        app:App    }});
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:

<template>    <h1>welcom vue</h1></template>
1
2
3
1
2
3