单文件组件
1、.vue文件
.vue文件，称之为单文件组件，是vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：HTML、css、JS
.vue文件是由三部分组成：<template>、<style>、<script>
2、vue-loader 加载.vue文件
浏览器本身并不认识.vue文件，所以必须对.vue文件进行解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader
需要注意的是vue-loader是基于webpack的
3、webpack
webpack是一个前端资源模块化加载器和打包工具，它能够把各种资源都作为模块化来使用和处理
实际上，webpack是通过不同的loader将资源加载后打包，然后输出后文件
简单来说，webpack就是一个模块加载器，所有资源都可以通过模块加载，最后打包输出
官网：http://webpack.github.io/
webpack版本：v1.x v2.x
webpack 有一个核心配置文件：webpack.config.js ，必须放在项目的根文件目录下
4、示例：步骤：
4.1 创建项目目录结构
webpack-demo
|-index.html 【步骤：手动创建】
|-main-js 入口文件 【步骤：手动创建】
|-App.vue vue文件 【步骤：手动创建】
|-package.json工程文件 (注：npm init --yes)
|-webpack.config.js webpack配置文件 【步骤：手动创建】
|-.babelrc Babel配置文件 （注：es6转化文件） 【步骤：手动创建】
4.2 编写 App.vue
4.3安装相关模块
S：生产依赖 ：项目上线使用到的模块
D: 开发依赖（--seve-dev的简写）：只在项目开发时需要的模块
a)、安装vue模块
cnpm install vue -S （vue模块下载）
b)、安装webpack 开发依赖
cnpm install webpack --seve-de v（简写： cnpm install webpack -D ）
c)、安装webpack服务器模块
cnpm install webpack-dev-server -D
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 fill-loader -D(用于加载字图、字库模块)
e)、 cnpm install babel-loader -D （注：es6转化文件）
cnpm install babel-core -D
cnpm install babel-preset-env -D (注：自动根据配置的运营环境自动启用需要加载的babel插件)
f)、安装预编译模板
cnpm install vue-template-compiler -D
合并： cnpm install 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 -D
cnpm install vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler -D
4.4 编写main.js
import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip = false;
new Vue({
render: h => h(App)//使用 render函数渲染组件
}).$mount('#app');
4.5 编写webpack.config.js
module.exports={
// 配置入口文件
entry:'./mian.js',
//配置出口文件
output:{
path:__dirname,//项目的根路径
filename:'build.js'
},
// 配置模块加载器
module:{
rules:[
{
test:/\.vue$/,//所有以.vue结尾的文件都由vue-loader加载
loader:"vue-loader"
},
{
test:/\.js/,//所有以.js结尾的文件都由babel-loader加载
loader:"babel-loader",
exclude:/node_modules/,//除了node_modules文件夹以外
}
]
}
};
4.6 编写.babelrc 文件
4.7编写 package.json
1、初始的：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
2、修改后的
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8000"
},
4.8 运行测试
注释：
<style scoped></style>
scoped：表示该样式只在当前组件有效