在
/src/store/
中创建一个目录
/模块目录名/
，里面有一个
index.js文件
，以便
vuex主实例对象
导入作为一个模块。
/src/store/模块目录名/index.js
导出的一个对象，只不过它可以被
/src/store/index.js
这个
vuex主实例对象
导入并使用。
这个
/src/store/模块目录名/index.js
依然可以导入其它模块或者是其它方法，以生成自己的模块。不过总体都在
/src/store/index.js
这个
vuex主实例对象
上。
/src/store/模块目录名/index.js
中的state属性里有一个变量，用于保存表格数据。
/src/store/模块目录名/index.js
中的mutations属性里有一个同步函数，用于修改表格数据。
/src/store/模块目录名/index.js
中的actions属性里有一个异步函数，用于发送axios请求获取表格数据，并通过mutations属性里的同步函数修改state属性里的表格数据变量。
在业务组件中从vuex中导入mapState与mapActions辅助函数，并用这两个辅助函数把
/src/store/模块目录名/index.js
中的state属性里的表格数据变量展开放置到业务组件的computed计算属性中，把
/src/store/模块目录名/index.js
中的actions属性里的异步函数放置到业务组件的methods方法函数中。
业务组件中定义一个计算属性，用于放置渲染表格用的表格数据，它主要对vuex中的表格数据变量进行处理，并用于渲染页面的表格DOM。
一开始让业务组件表格loading。
在业务组件的created()中调用vuex异步函数，发送一个axios请求表格数据。得到数据后，更新vuex中的表格数据。之后业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。
停止表格loading。
删除功能，直接发送一个axios请求用于删除数据，vuex中的同步修改数据，业务组件中的表格数据计算属性也会重新计算，进而更新表格。
/src/store/模块目录名/index.js
中的mutations属性里有一个同步函数，用于删除vuex表格数据中一项数据。
在业务组件中从vuex中导入mapMutations辅助函数，并用这个辅助函数把把
/src/store/模块目录名/index.js
中的mutations属性里的同步函数放置到业务组件的methods方法函数中。
直接发送一个axios请求用于删除后端的一项数据。
删除失败，做出提示后，不做操作。
删除成功，做出提示后，调用vuex中的同步函数，删除vuex表格数据中一项数据。
由于vuex表格数据改变，业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。
完成功能，直接发送一个axios请求用于完成数据，vuex中的同步修改数据，业务组件中的表格数据计算属性也会重新计算，进而更新表格。
/src/store/模块目录名/index.js
中的mutations属性里有一个同步函数，用于修改vuex表格数据中一项数据变成完成状态。
在业务组件中从vuex中导入mapMutations辅助函数，并用这个辅助函数把把
/src/store/模块目录名/index.js
中的mutations属性里的同步函数放置到业务组件的methods方法函数中。
直接发送一个axios请求用于完成后端的一项数据。
完成操作失败，做出提示后，不做操作。
完成操作成功，做出提示后，调用vuex中的同步函数，修改vuex表格数据中一项数据变成完成状态。
由于vuex表格数据改变，业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。
新增功能，对数据进行校验，发送一个axios请求用于新增数据，调用vuex异步函数，发送一个axios请求表格数据，更新vuex中的表格数据。业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。
对数据进行校验，并处理数据让其符合后台需求的格式。
直接发送一个axios请求用于新增数据。
新增失败，做出提示后，不做操作。
新增成功，做出提示后，复用关闭弹窗的方法，之后调用vuex异步函数，发送一个axios请求表格数据。得到数据后，更新vuex中的表格数据。之后业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。
/src/store/index.js
中引入同目录中其它文件夹，每个文件夹中的index.js就是它的一个模块。表现为在它的Vuex实例对象中配置对象中modules对象中的一个属性。
使用模块中的state及getters及mutations及actions等。
一般通过辅助函数来进行。
<
meta
charset
=
"UTF-8"
/>
<
script
src
=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
>
</
script
>
</
head
>
<
div
id
=
"app"
>
<
h1
v-color:theArg1:theArg2.theModifiers1.theModifiers2
=
"'red'+6"
>
h1
</
h1
>
</
div
>
<
script
>
Vue
.
directive
(
"color"
, {
bind
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`bind()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
inserted
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`inserted()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
update
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`update()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
componentUpdated
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`componentUpdated()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
unbind
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`unbind()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
let
vm =
new
Vue
({
el
:
"#app"
,
</
script
>
</
body
>
</
html
>
<
meta
charset
=
"UTF-8"
/>
<
script
src
=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
>
</
script
>
</
head
>
<
div
id
=
"app"
>
<
h1
v-color:theArg1:theArg2.theModifiers1.theModifiers2
=
"'red'+6"
>
h1
</
h1
>
</
div
>
<
script
>
let
vm =
new
Vue
({
el
:
"#app"
,
directives
: {
color
:{
bind
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`bind()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
inserted
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`inserted()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
update
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`update()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
componentUpdated
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`componentUpdated()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
unbind
(
el, binding, vnode, oldVnode
) {
console
.
log
(
`unbind()钩子函数： el-->`
,el,
`\n binding-->`
,binding,
`\n vnode-->`
,vnode,
`\n oldVnode-->`
,oldVnode);
</
script
>
</
body
>
</
html
>
自定义指令的定义方式：
对象，有五个钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
虚拟DOM—真实DOM 插入页面的时候，执行
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">
<h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2="'red'+6" v-background="'blue'">h1</h1>
</div>
<script>
Vue.directive("color", {
bind(el, binding, vnode, oldVnode) {
console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
inserted(el, binding, vnode, oldVnode) {
console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
el.style.color=binding.value.slice(0,3)
update(el, binding, vnode, oldVnode) {
console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
componentUpdated(el, binding, vnode, oldVnode) {
console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
unbind(el, binding, vnode, oldVnode) {
console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
let vm = new Vue({
el: "#app",
directives: {
bgColor: {
bind() {},
background:{
bind(el, binding, vnode, oldVnode) {
console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
inserted(el, binding, vnode, oldVnode) {
console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
el.style.backgroundColor=binding.value;
update(el, binding, vnode, oldVnode) {
console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
componentUpdated(el, binding, vnode, oldVnode) {
console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
unbind(el, binding, vnode, oldVnode) {
console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
</script>
</body>
</html>
函数（简写） ，相当于对象的inserted()和update()这两个钩子，常用的方式
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
虚拟DOM—真实DOM 插入页面的时候，执行
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">
<h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2="'red'+6" v-background="'blue'">h1</h1>
</div>
<script>
Vue.directive("color", (el, binding, vnode, oldVnode)=> {
console.log(`函数简写，相当于对象的inserted()和update()： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
console.log(`binding.value.slice(0,3)-->`, binding.value.slice(0,3));
el.style.color=binding.value.slice(0,3)
let vm = new Vue({
el: "#app",
directives: {
background(el, binding, vnode, oldVnode) {
console.log(`函数简写，相当于对象的inserted()和update()： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
el.style.backgroundColor=binding.value
</script>
</body>
</html>
name：指令名，不包括 v- 前缀。
rawName: 指令名，包括 v- 前缀。
value：指令的绑定值，计算后的，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。不能计算，例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">
<h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2="'red'+6" v-background="'blue'">h1</h1>
</div>
<script>
Vue.directive("color", {
bind(el, binding, vnode, oldVnode) {
console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
inserted(el, binding, vnode, oldVnode) {
console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
el.style.color=binding.value.slice(0,3)
update(el, binding, vnode, oldVnode) {
console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
componentUpdated(el, binding, vnode, oldVnode) {
console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
unbind(el, binding, vnode, oldVnode) {
console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
let vm = new Vue({
el: "#app",
directives: {
bgColor: {
bind() {},
background:{
bind(el, binding, vnode, oldVnode) {
console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
inserted(el, binding, vnode, oldVnode) {
console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
el.style.backgroundColor=binding.value;
update(el, binding, vnode, oldVnode) {
console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
componentUpdated(el, binding, vnode, oldVnode) {
console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
unbind(el, binding, vnode, oldVnode) {
console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
</script>
</body>
</html>
vue-cli的配置文件在/vue.config.js
2023年4月vue2的/vue.config.js新默认配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
老vue2的/vue.config.js新默认配置
module.exports = {
target:"https://www.jianshu.com",
ws: true,
changeOrigin: true,
pathRewrite:{
"/jianshu":""
