Vue基础知识

配置相关

devServer

1、作用：通过devServer，可以在NodeJS架设起临时的服务器用于项目的运行与调试。

module.exports = {// webpack-dev-server 相关配置devServer: {open: true,inline: true,host: '0.0.0.0', // 允许外部ip访问port: 8080, // 端口https: false, // 启用https}
}

2、inline：Default: true，作用：用于设置代码保存时是否自动刷新页面。

3、hot：Default: true，作用：用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）

4、open：Default: false，作用：用于设置 server 启动后是否自动打开浏览器

5、openPage：Type: string，作用: 指定 deserver 编译完成后自动打开的页面

　　注意：需要配合 open来使用，如果Vue router 为 hash mode，应在url前面补上 /#，如：openPage: '/#/about'

6、https：Default: false，用于设置是否启用https

7、port：Type: number，指定要监听请求的端口号

8、host：Default: localhost，用于指定devDerve使用的host，如果你希望服务器外部可以访问，设定为 host: '0.0.0.0'

9、compress；Type: boolean，对 devServer 所有服务启用 gzip 压缩

11、headers：Type: object，在所有响应中添加首部内容

module.exports = {devServer: {headers: {'X-Custom-Foo': 'bar'}}
};

12、overlay

• Type: boolean object: { boolean errors, boolean warnings }

• 作用：当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。

// 其一：显示编译器错误
module.exports = {devServer: {overlay: true}
};
// 其二：示警告和错误
module.exports = {devServer: {overlay: {warnings: true,errors: true}}
};

13、proxy：设置API访问代理，其常用 options （属性）如下

　　target：代理的服务器，也就是api要访问的服务器

　　ws：true，是否代理 websocket

　　secure：false，是否使用HTTPS协议。默认 false

　　changeOrigin：true，将主机头的来源更改为目标URL，也就是是否允许跨域

　　pathRewrite：重写 url 的 path 部分

devServer.proxy 的工作原理

1、proxy 接受一个对象，对象键值对的 key 用来匹配 api 的 url 中的 path。也就是说，当我们进行如下配置时：

module.exports = {proxy: {'/api': {target: 'http://127.0.0.10:3000',}}
};

devServer 会自动对 path 为 /api 开头的 api 做代理转发。而 path 不是 /api 开头的就不会进行处理。

　　这里需要注意一下 path 与 url 的区别，path 是取  url 里的一部分

2、pathRewrite 属性讲解

　　pathRewrite 接受一个对象。

（1）key：对象键值对中的 key 是一个正则表达式。这里需要注意正则的写法，必须与^开头。熟悉正则表达式的朋友就会知道，这表明，传给 deveServer.proxy 的 api 的 url 必须是以正则表达式所要匹配的字符串开头。

例如：如下配置 pathRewrite: {"^/api" : ""}

现在这样两个 api：http://localhost:80/api/login   和   /api/login，devServe.proxy 匹配哪个？

会匹配第二个，因为第二个以/api开头，而第一个以http开头。

（2）value：对象键的 value 是个字符串，用来替换 key 匹配的字符串

3、pathRewrite 替换的结果

　　有了上面的知识，那我们就可以明白 pathRewrite 的工作原理以及结果是什么

proxy: {'/api': {target: 'http://emcs-app:8080/',changeOrigin: true,pathRewrite: {'^/api': '/'}}
}

　比如项目上的配置，

本地开发时实际上接口请求是 http://test.modb.cc:8080/api/getUser，

path 的 /api 匹配上面的配置就会转发及重写为 http://emcs-app:8080/getUser 这样请求到后台服务去

Vuex

• 用户通过dispatch 去触发actions
• actions通过commit去触发mutations
• mutations进而改变state
• 伴随着state的改变，重新去渲染这个组件

为什么要通过dispatch、state、commit再去操作mutations呢？

• mutations支持同步的操作，而actions支持异步的操作。
• 用户在操作数据的时候，会调用后端的接口，是一个异步的操作，这个流程就要借助actions 的

state

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

1.定义 
// 初始化vuex对象
const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})
2. 原始调用
组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下

<div> state的数据：{{ $store.state.count }}</div>

如：若依框架的定义：

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    dict,
    user,
    tagsView,
    permission,
    settings
  },
  getters
})

user,permission又是个"store"
 

详细教程

Vue—— vuex详解，彻底搞懂vuex-CSDN博客