webpack 入门知识（二）babel、Vue、Vue router的配置

前置知识

1. ES6中的导入和导出
   ES6导入模块：import 模块名 from “模块标识符” / import “表示路径”
   ES6向外暴露成员：export default / export
   export.js

export default{
	name:'name',
	age:20
}
export var title = "导出的标题"
export var cotent = "导出的内容"
export var color = "blue"

• export default向外暴露成员，可以使用任意变量接收
• 一个模块只能使用一次export default
• export 向外暴露成员只能使用{ }接收，名称必须与导出时的相同
• 一个模块可以使用多次export
  main.js

import me from './test.js'
import {title,cotent} from './test.js' //导入title,cotent
import {color as myColor} from './test.js'  //使用as更换名称
console.log(me) //{name: "name", age: 20}
console.log(title + '--' + cotent )//"导出的标题--导出的内容" 
console.log(color) //"blue"

2. Node中的导入和导出
   Node导入模块：var 名称 = require(“模块标识符”)
   Node向外暴露成员：module.exports

webpack中babel的配置

为什么要使用babel？

在webpack中只能助理一部分ES6语法，一些更高级的ES6，ES7语法处理不了，这时候就需要babel和babel相关的loader，当第三方loader把高级语法转为地基与法之后，会把结果交给打包好的bundle.js

1. 安装

npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

注意：babel的版本要和babel-loader的版本对应如果使用babel 6则安装babel-loader7
如果使用babel 7安装babel-loader8

2. 在webpack.config.js中配置loader

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

注意：在配置babel的loader规则时，必须把node_modules目录通过exclude选项排除。

3. 配置babelrc
   在项目根目录下创建一个.babelrc文件（无文件名）。
   .babelrc

{
	"presets":["env","stage-0"],
	"plugins":["transform-runtime"]
}

webpack中Vue的配置

各版本vue.js的配置

vue.js有哪些版本？

• 完整版：vue.js/vue.common.js/vue.esm.js/vue.esm.browser.js
• 只包含运行时版：vue.runtime.js/vue.runtime.common.js/vue.runtime.esm.js
• 完整版（生产环境）：vue.min.js/vue.esm.browser.min.js
• 只包含运行时版本（生产环境）：vue.runtime.min.js

1. 安装Vue

npm install -S vue  //在生产环境下安装Vue

2. 在webpack.config.js中配置

module.exports = {
	//...
	resolve:{
		alias:{
			'vue$':'vue/dist/vue.js' //设置导入的vue的某个版本
		}
	}
}

3. 在main.js中导入Vue

import Vue from "vue" //导入Vue

const vm = new Vue({  //创建一个Vue实例
	el:'#app',
	data:{
		msg:'123'
	},
	methods:{
		
	}
})

4. 在index.html使用Vue

<div id="app">
	{{msg}}
</div

##.vue文件的配置

1. 安装解析.vue的loader

npm i vue-loader vue-template-compiler -D //安装对应的loader

2. webpack.config.js中配置

//...
const VueLoaderPlugin = require('vue-loader/lib/plugin')//引入vue-loader依赖的VueLoaderPlugin插件
module.exports = {
	//...
	plugins:[ 
		new VueLoaderPlugin()  //使用vue-loader依赖的VueLoaderPlugin插件
	],	
	module:{
		rules:[
			//...
			{test:/\.vue$/,use:'vue-loader'}  //处理.vue文件的loader
		]
	}
}

3. main.js中引入和使用
   在根目录创建一个login.vue

<template>
	<div>
		<h1>这是登录组件</h1>
	</div>
</template>
<script></script>
<style></style>

main.js

import Vue from "vue" //导入vue模块
import login from "../login.vue" //导入login组件
const vm = new Vue({
	el:'#app',
	render:creEle=>creEle(login)
})

webpack中vue-router的配置

配置普通路由

index.js

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
import app from "./App.vue"
import goodList from "./main/GoodList.vue"
import account from "./main/Account.vue"
var router = new VueRouter({
	routes:[
		{path:'/account',component:account},
		{path:"/goodList",component:goodList}
	]
})

var vm = new Vue({
	el:'#app',
	render:c=>c(app),
	router
})

App.vue

<template>
	<div>
		<h1>这是App组件</h1>
		<router-link to='/goodList'>goodList</router-link>
		<router-link to='/account'>account</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style>
</style>

GoodList.vue

<template>
	<h1>这是GoodList组件</h1>
</template>

<script>
</script>

<style>
</style>

Account.vue

<template>
	<h1>这是Account组件</h1>
</template>

<script>
</script>

<style>
</style>

index.html

<div id="app">
</div>

配置子路由

Login.vue

<template>
	<h1>这是login组件</h1>
</template>
//...

Register.vue

<template>
	<h1>这是register组件</h1>
</template>
//...

Account.vue

<template>
	<div>
		<h1>这是Account组件</h1>
		<router-link to="/account/login">LOGIN</router-link>//+
		<router-link to="/account/register">REGISTER</router-link>//+
		<router-view></router-view>//+
	</div>
</template>
//...

main.js

//...
import login from "../subcom/login.vue" //导入子组件
import register from "../subcom/register.vue" //导入子组件
//...
const router = new VueRouter({
	routes:[
		{
		path:'/account',
		component:account,
		children:[ //+
			{path:'login',component:login},//+
			{path:'register',component:register}//+
		]	
		},
		{path:"/goodList",component:goodList}
	]
})
//...

单文件组件的样式

1. 组件中的样式可以作用到全局，需要加scoped属性让其只对组件生效。

scoped会在组件模板上的所有标签上生成一个属性，Vue通过属性选择器操作样式。

//...
<style lang="scss" scoped>
	h1 {
		color: red;
	}
	h2{
		color: blue;
	}
</style>

抽离路由模块

在main.js同级路径创建一个router.js

import VueRouter from "vue-router"//导入Vue的路由模块

import account from "./main/Account.vue" //导入Account组件
import goodList from "./main/GoodList.vue"//导入GoodList组件
import login from "../subcom/login.vue" //导入Account的子组件login
import register from "../subcom/register.vue" //导入Account的子组件register

var router = new VueRouter({
	routes:[
		{
		path:'/account',
		component:account,
		children:[
			{path:'login',component:login},
			{path:'register',component:register}
		]	
		},
		{path:"/goodList",component:goodList}
	]
})
export default router //暴露router模块

main.js

//导入Vue相关模块
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
//导入APP组件
import app from "./App.vue"
//导入router模块
import router from "./router.js"
var vm = new Vue({
	el:'#app',
	data:{
		html:'<a href="#">aaaa</a>'
	},
	render:c=>c(app),
	router
})