webpack 入门知识（二）babel、Vue、Vue router的配置
韦锦程
前置知识
- 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"
- Node中的导入和导出
Node导入模块：var 名称 = require(“模块标识符”)
Node向外暴露成员：module.exports
webpack中babel的配置
为什么要使用babel？
在webpack中只能助理一部分ES6语法，一些更高级的ES6，ES7语法处理不了，这时候就需要babel和babel相关的loader，当第三方loader把高级语法转为地基与法之后，会把结果交给打包好的bundle.js
- 安装
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
- 在webpack.config.js中配置loader
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
注意：在配置babel的loader规则时，必须把node_modules目录通过exclude选项排除。
- 配置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
- 安装Vue
npm install -S vue //在生产环境下安装Vue
- 在webpack.config.js中配置
module.exports = {
//...
resolve:{
alias:{
'vue$':'vue/dist/vue.js' //设置导入的vue的某个版本
}
}
}
- 在main.js中导入Vue
import Vue from "vue" //导入Vue
const vm = new Vue({ //创建一个Vue实例
el:'#app',
data:{
msg:'123'
},
methods:{
}
})
- 在index.html使用Vue
<div id="app">
{{msg}}
</div
##.vue文件的配置
- 安装解析.vue的loader
npm i vue-loader vue-template-compiler -D //安装对应的loader
- 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
]
}
}
- 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}
]
})
//...
单文件组件的样式
- 组件中的样式可以作用到全局，需要加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
})
类似资料：