webpack入门知识(二)babel、Vue、Vue router的配置
2020-07-09 14:54
169 查看
前置知识
- 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 })
相关文章推荐
- vue学习(四)基础入门-webpack(3)-配置vue
- 让 babel webpack vue 配置文件支持智能提示的方法
- Vue.js——60分钟webpack项目模板快速入门
- Vue --(vue-cli脚手架)webpack配置文件详细分析
- vue.js开发外卖App项目总结之webpack的详细配置(三)
- 详解vue2.0脚手架的webpack 配置文件分析
- webpack+vue+vueRouter模块化构建完整项目实例超详细步骤(附截图、代码、入门篇)
- webpack配置报错vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPl
- vue配置 webpack构建vue项目
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue中不通过./build/webpack.base.conf.js 配置使用jquery
- vue 快速入门与最佳实践(vue-cli, webpack, vue 最佳实践)
- vue打包项目,webpack配置改变以及图片正确引入姿势
- Vue工程模板文件 webpack打包配置方法
- webpack构建vue项目(配置篇)
- vue-cli的webpack模版项目配置解析
- webpack:从入门到真实项目配置
- webpack-使用Vue的配置过程
- webpack.dev.conf.js配置before----vue
- webpack配置适合es6语法规则的babel