// 模块规则（配置 loader、解析器等选项）
test: /.js?$/, //解析的时候匹配js文件
//翻译什么文件夹中的文件
include: [path.resolve(__dirname, "www/app")],
//不翻译什么文件夹中的文件
exclude: [path.resolve(__dirname, "node_modules")],
// loader:"babel-loader",
//配置翻译语法
// options:{
// presets:["es2015","es2016"] // }
},
{
test: /.vue$/,
loader: 'vue-loader',
include: [path.resolve(__dirname, "www/app")],
exclude: [path.resolve(__dirname, "node_modules")],
options: {
loaders: {
js: 'babel-loader!eslint-loader'
}
}
},
{
test: /.css$/,
include: [path.resolve(__dirname, "www/app")],
exclude: [path.resolve(__dirname, "node_modules")],
use: ['vue-style-loader', 'css-loader'],
},
{
test: /.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
] }
] },
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
},
//最新版webpack需要引入此插件
plugins: [
new VueLoaderPlugin()
],
//webpack设置代理跨越
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000', //设置你调用的接口域名和端口
//这里理解成/api代理target中的地址，后面组件中调用接口要使用/api代替
pathRewrite: { '^/api': '' }
}
}
}
}
./www/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="public/all.js"></script>
</html>./www/app/App.vue:
<template>
<div>
<h1>counter的{{$store.state.counterStore.a}}</h1>
<h1>taobao的{{$store.state.taobaoStore.a}}</h1>
<button @click="add">触发counter的ADD</button>
</div>
</template>
<script>
export default {
methods:{
add(){
//根据命名空间发出异步
this.$store.dispatch("counterStore/ADD")
}
}
}
</script>./www/app/main.js:[
import Vue from "vue";
import App from "./App.vue";
import store from "./store";new Vue({
el: "#app",
store,//引入store文件夹中的index.js
render: (h) => h(App)
})
