.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
.vue文件由三部分组成：<template>、<style>、<script>
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>
浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的
webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出
webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下
官网
1）创建项目，目录结构 如下：
webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件-这里文件记得要加入花括号{}
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
2）编写App.vue
<template>
<div id="itany">
<h1>hello world</h1>
</div>
</template>
<script>
console.log(123);
</script>
<style>
body {
background-color: #ccc;
}
</style>
3）安装相关模板
在D:\phpstudy_pro\WWW\vue\webpack-demo路径下执行
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板
合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
4）编写main.js
/**
* 使用ES6语法引入模板
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render:function(h){ //使用render函数渲染组件
return h(App);
}
});
5）编写webpack.config.js
module.exports={
//配置入口文件
entry:'./main.js',
//配置入口文件输出位置
output:{
path:__dirname,//项目根路径
filename:'build.js'
},
//配置模块加载
module:{
rules:[
{
test:/\.vue$/,//所有以.vue结尾的文件都由vue-loader加载
loader:'vue-loader',
},
{
test:/\.js$/,
loader:'babel-loader',//所有以.js结尾的文件都由babel-loader加载，除了node_modules以外
exclude:/node_modules/
}
]
}
}
6）编写.babelrc
{
"presets":[
["env",{"module":false}]
]
}
7）编写package.json
{
省略。。。。。
新增下边配置
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8080"
}
}
8）编写html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>
9）运行测试
npm run dev