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

这还是不太逆天了？其实这就是需要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

项目目录结构

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

webpack准备工作

下载安装:

npm install webpack --save -dev
npm install webpack-dev-server --save -dev
   
   
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

这样我们只需要在终端输入：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

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

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

下载babel需要的

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

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

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

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

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

//引入Vue
import Vue from 'vue';

//引入组件
import App from './App.vue';

//实例化Vue
new Vue({
    el:'body',
    components:{
        app:App
    }
});
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13

App.vue:

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