webpack4.x +vue2.9.6+vue-loader1
2019-02-14 本文已影响2人
rainbowz
前言
webpack4.x
vue2.96
vue-loader15.x
安装vue-loader成功感觉需要运气，我也不知道怎么成功的。有时间总结一下。
结构目录:
图片.png
安装vue cnom i vue -S
安装loader cnpm install vue-loader vue-template-compiler -D
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
package.json
{
"name": "webpack4_vue_study5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.6.2",
"vue-template-compiler": "^2.6.6",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"vue": "^2.6.6"
}
}
main.js
//import $ from 'jquery'
//import './css/index.css'
import Vue from "../node_modules/vue/dist/vue.js"
import login from "./login.vue"
/* let login = {
template:"<h1>这是login组件，是使用网页中的形式创建出来的</h1>"
} */
let vm = new Vue({
el:'#app',
data:{
msg:'兽人永不为奴!'
},
/* components:{
login
} */
render:c => c(login),
})
webpack.config.js
// webpack配置文件
// 这个配置文件，其实就是一个 JS 文件，通过Node中的模块操作，向外暴露了一个配置对象
let path = require('path')
let webpack = require('webpack') //启用热更新第二步
let htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry:'./src/main.js',//入口
output:{
filename:'bundle.js',
path:path.resolve('./dist')
},//出口
devServer:{
open:true,
port:3000,
contentBase:'./src',
hot: true, //启用热更新第一步
},//开发服务器
module:{
rules:[
/* {test:/\.css$/,use:['style-loader','css-loader']},//用来处理css的第三代模块,处理顺序，从后向前
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//用来处理less文件的第三方模块
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
{test:/\.(jpg|jpeg|png|gif|bmp)$/,use:'url-loader?limit=30000&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
// limit 给定的值，是图片的大小，单位是byte，如果我们引用的图片大于这个大小，则不会转为base64编码，如果小于这个大小，则会转为base64编码
// name=[name].[ext]表示名字后缀不变,name=[hash:8]-[name].[ext]前面有8为哈希值
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件loader
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置babel来转化高级的ES语法 */
{test:/\.vue$/,use:'vue-loader'},//处理vue的loader
],//所有的匹配规则
},//模块配置（用于配置所有的第三方模块加载器）
plugins:[
new webpack.HotModuleReplacementPlugin(),//启用热更新第三步
new htmlWebpackPlugin({ // 创建一个在内存汇总生成html页面的插件
template:path.resolve('./src/index.html'),//指定模板页面,
filename:'index.html',//指定生成页面的名称
}),
new VueLoaderPlugin(),
],//插件
mode:'development',//开发者模式
resolve:{
},//配置解析
}
login.vue
<template>
<div>
<p>hey jude</p>
<p>hey jude</p>
<p>hey jude</p>
</div>
</template>
<script>
/* export default {
data(){
return {
msg:"123"
}
},
methods:{
show(){
console.log("调用了login.vue的show方法")
}
}
}
// 在ES6中，规定了如何 导入 和 导出 ，模块
// ES6中导入模块，使用 import 模块名称 from "模块标识符"
// 在ES5中，使用 export default 和 export 向外暴露成员 */
</script>
<style>
</style>
图片.png
步骤:
1安装vue ,vue-loader,
2定义.vue结尾的组件。 由三部分组成 template script style
3使用import导入这个组件
4创建 vm的实例
let vm = new Vue({
el:'#app',
data:{
msg:'在webpack尝试使用Vue'
},
components:{
login
}
在webpack中，如果想要通过vue把一个组件放到页面中去，需要使用render函数
render:function(createElements){
return createElements(login)
},
render:c => c(login),
})
es6中导入模块 使用 import 模块名称 from '模块标识符',
在es6中，使用export default 和export向外暴露成员
在node中使用var 名称=require('模块标识符')
export default向外暴露的成员可以使用任意的变量接受，可以自定义接受规则。
在一个模块中export default只允许向外暴露一次
test.js
var info = {
name:"tony",
age:18
}
export default info
export default {
address:'BeiJing'
}
main.js
import login from "./login.vue"
import info from "./test.js"
console.log(info)
使用export
只能使用花括号接收
test.js
export var title='人民教育出版社'
export var name='翟天临'
export var age=17
main.js
import m1,{title as title2,name,age as ageage}from "./test.js"
console.log(m1)
console.log(title2)
console.log(name)
console.log(ageage)
图片.png
1export可以暴露多个成员 ，
2不一定需要导出几个接受几个。
3导出的成员必须严格按照导出时候的名称使用花括号接收,也可以用as 起别名来接收
二
安装路由
cnpm i vue router -S
.vue里面的lang 属性 scoped属性
抽离路由模块
