Node.js和Vue开发 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第13天。

以下是我在进行node.js以及Vue同时开发时遇到的一些问题以及解决的一些办法。

怎样同时运行Node.js和Vue

1. 前提：已经安装了node.js以及vue/cli

2. 安装必要的插件（在node.js的目录下）：

   npm install concurrently(必须安装)
   npm install nodemon(可选安装)
   

3. 在node.js服务器所在的目录以及vue所在的目录下，使用命令：

   npm install
   

   补全node_moudles相关配置文件

4. 将Vue项目放到node.js文件目录下，作为client文件夹

5. 更改client文件夹下的package.json文件，具体如下：

   "scripts":{
   	"serve":"vue-cli-service serve",
   	"build":"vue-cli-service build",
   	"start":"npm run serve"
   }
   

6. 更改node.js文件夹下的package.json文件

   • 如果有安装nodemon，更改为

     "scripts":{
     	"client":"npm start --prefix client",
     	"start":"node ./bin/www",
     	"server":"nodemon ./bin/www",
     	"dev":"concurrently \"npm run serve\" \"npm run client\""
     }
     

   • 如果没安装nodemon插件

     "scripts":{
     	"client":"npm start --prefix client",
     	"start":"node ./bin/www",
     	"dev":"concurrently \"npm start\" \"npm run client\""
     }
     

7. 使用npm run dev即可运行项目

Vue中消息的发布与订阅

原生JavaScript无法实现消息的订阅和发布，这里引入一个库，叫作pubsub.js，publish（发布）和subscribe（订阅）

1. 消息的发布与订阅，是组件间通信的方式，适用于任意组件间通信

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

   2. 引入：import pussub from 'pubsub-js'

   3. 接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件本身

      methods(){
      	demo(data){......}
      }
      ......
      mounted(){
      	this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息
      }
      

   4. 提供数据：pubsub.publish('xxx',数据)

   5. 最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去取消订阅

   6. 注意，该方式与全局事件总线差不多；

webStorage

​ 1.存储内容大小一般不超过5MB左右（不同浏览器可能不一样）

​ 2.浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。

​ 3.相关API：

​ 1.xxxxxStorage.setItem('key'，'value');

​ 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

​ 2.xxxxxStorage.getItem('person');

​ 该方法接受一个键名作为参数，返回键名对应的值

​ 3.xxxxxStorage.removeItem('key');

​ 该方法接受一个键名作为参数，并把该键名从存储中删除

​ 4.xxxxxStorage.clear()

​ 该方法会清空存储中的所有数据

​ 4.备注：

​ 1.SessionStorage存储的内容会随着浏览器窗口关闭而消失

​ 2.LocalStorage存储的内容，需要手动清除才会消失

​ 3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null

​ 4.JSON.parse(null)的结果依然是null

​