项目管理

vue/cli创建web项目

• 配置淘宝镜像：npm config set registry https://registry.npm.taobao.org
• 安装vue/cli：npm install -g @vue/cli
• 切换到你要创建项目的目录，然后使用命令创建项目：vue create xxx
• 启动项目：npm install serve

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)   
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] 
babel, eslint)
? Pick the package manager to use when 
installing dependencies:
  Use Yarn
> Use NPM

查看webpack完整配置文件

为了免于破坏，vue脚手架把webpack配置文件webpack.config.js隐藏了，想查看完整配置文件需执行 vue inspect > output.js命令。

webpack中用于语法检查的loader

• eslint
• jslint
• jshint

自动升级过期包

• 第一步：使用npm 命令查看已过期安装包 npm outdated
• 第二步：安装升级插件 npm install -g npm-check-updates
• 第三步：查看最新版本命令 ncu
• 第四步：升级低版本npm包文件 ncu -u

查看包所有版本号

npm view element-plus versions

常用插件

• uuid 自动生成id插件
• nanoid 自动生成id插件
• pubsub-js 消息发布订阅插件
• axios 异步请求插件 (其他工具：xhr 发ajax请求鼻祖，jquery，fetch 原生工具)

常用技术

自定义事件

说明：Student 和 School 都是vue组件

自定义事件注册和触发遵循的一条规则是，事件的注册和触发需要是同一个对象

• 写法一

<Student v-on:studentEvent="getStudentName"></Student>
methods: {
    // ...params包裹了给方法传递的除name外的剩余全部参数
    getStudentName(name, ...params) {
      console.log("通过事件获取到的姓名：" + name);
    },
}

• 写法二

<Student @studentEvent="getStudentName"></Student>
methods: {
    // ...params包裹了给方法传递的除name外的剩余全部参数
    getStudentName(name, ...params) {
      console.log("通过事件获取到的姓名：" + name);
    },
}

• 写法三

在一个地方注册事件，并回调函数
<Student ref="student"></Student>
mounted() {
    setTimeout(() => {
      this.$refs.student.$on("studentEvent", this.getStudentName);
    }, 3000);
},
methods: {
    getStudentName(name, ...params) {
      console.log("通过事件获取到的姓名：" + name);
    },
},

在另一个地方触发事件并传递数据
<button @click="sendStudentName">把学生的姓名给app</button>
methods: {
    sendStudentName() {
      this.$emit("studentEvent", this.name,参数二,参数三);
    },
}

这种写法相当于给组件自身上绑定一个原生点击事件,这样会把click事件交给Student组件最外层的div来执行
<Student ref="student" @click.native="show"></Student>
show(){
    console.log('执行了一个原生dom事件')
}

如果这样写就会被当做一个自定义事件，需要通过emit来触发
<Student ref="student" @click="show"></Student>
show(){
    console.log('执行了一个原生dom事件')
}
this.$emit("click");

解绑事件一个事件或者多个事件
beforeDestroy() {
    // 解绑一个事件直接在对象上指定
    this.$refs.student.$off("studentEvent", this.getStudentName);

    // 解绑多个事件直接在vm上删除多个事件对象
    // this.$off(['studentEvent1','studentEvent2'])
},

组件销毁时，其身上绑定的事件也将自动失效
methods: {
    destroyStudent() {
      this.$destroy();
    },
},

http请求跨域

举个发送请求的栗子

请求端 http:localhost:8080 服务端 http:localhost:5000

解释跨域本质：浏览器发送的请求确实将请求发送到服务器上了，服务器也收到了本次的请求，服务器也把数据交给了浏览器，但是浏览器没有进一步给到用户页面(因为浏览器发现跨域请求了，所以将数据握在手里不给页面了)

解决跨域问题： 1.标准解决方式：cors，不用浏览器做任何事情，但需要服务端人员返回数据时带上必要的特殊相应头。但是有个问题就是任何人都可以找这台服务器要数据了。 2.jsonp解决方式：前后端都需要写东西才能解决。只能解决get请求方式。 3.代理服务器解决方式：代理服务的端口和浏览器访问的端口是一致的。 代理服务器开启的方式有：1.经典方式nginx 2.vue-cli

配置代理服务器,5000是存储数据的服务器端口号 //代理方式二：配置多个代理 devServer: { proxy: { // '/xxx' 请求前缀，目的是为了判断请求是否要走代理，增加了请求的灵活性 '/atguigu': { // 访问的真实数据服务器地址和端口 target: 'http://localhost:5000', // 配置路径，目的匹配服务器接口路径 pathRewrite: { "^/atguigu": "" }, // 支持websocket，默认true ws: true, // 指出请求的来源地址，true就实话实说，false就虚报地址，默认true changeOrigin: true, // 控制请求头中host值，设置成false比较好 }, '/demo': { // 访问的真实数据服务器地址和端口 target: 'http://localhost:5001', // 配置路径，目的匹配服务器接口路径 pathRewrite: { "^/demo": "" }, // 支持websocket，默认true ws: true, // 指出请求的来源地址，true就实话实说，false就虚报地址，默认true changeOrigin: true, // 控制请求头中host值，设置成false比较好 }, } }

注意：并不是所有的请求都通过代理服务器发送给5000。当8080服务器有的东西就不需要通过代理。