vue项目中的小知识--快捷键等

0 版本号
1 代码片段的获取：
2 vscode中一些常用扩展
3 进入另一个文件夹，返回上一级
4查看Vue的版本和Vue/CLI的版本
5 --save-dev --save区别
6 csdn图片大小尺寸
6 postman,airpost 接口测试
7各个插件的版本号
8 vue中全局组件一般写在components中，一般组件写在pages中
9 created可能会导致页面白屏，mounted会导致闪屏，体验各不相同
10 watch和computed应用
11 api 接口及测试接口是否有数据
12配置全局事件总线
13开发环境和生产环境
14 接口文档管理工具：Swagger, Apizza, Yapi

0 版本号

npm uninstall -g vue-clinpm install -g @vue/cli
npm install -g @vue/cli@4.5.13cnpm install --save less less-loader@5cnpm install --save vue-router@3.5.3
cnpm install --save vue-router@3

1 代码片段的获取：

vscode扩展中搜： vue vscode snippets

2 vscode中一些常用扩展

3 进入另一个文件夹，返回上一级

cd app
cd ..

4查看Vue的版本和Vue/CLI的版本

查看Vue版本：

1.npm list vue

2.进入项目中package.json文件直接查看

查看Vue/cli版本：

vue -V 或者 vue --version

5 --save-dev --save区别

简单来说： 使用命令 --save 或者说不写命令 --save  ,都会把信息记录到 dependencies   中；
dependencies 中记录的都是项目在运行时需要的文件；使用命令 --save-dev 则会把信息记录到 devDependencies  中；devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；也就是说我们开发完成后，最终的项目中是不需要这些文件的；所以，如果只是在开发过程中需要的工具或者文件我们 使用 --save-dev 即可；
如果是项目运行必须的文件，那么就使用 --save就好了；

6 csdn图片大小尺寸

<div align=center> <img src="https://img-blog.csdnimg.cn/5c56b33df8b2471d8d85c6c342de94e9.png" width="50%" height="50%" >

6 postman,airpost 接口测试

7各个插件的版本号

8 vue中全局组件一般写在components中，一般组件写在pages中

9 created可能会导致页面白屏，mounted会导致闪屏，体验各不相同

10 watch和computed应用

watch和nextTick合用==》swiper轮播图
computed常用来处理空对象和空数组的问题

computed:常和vuex配合使用

 mounted() {//派发action:通过Vuex发起ajax请求，将数据存储在仓库中this.$store.dispatch("getBannerList");}
computed: {...mapState({bannerList: (state) => state.home.bannerList,}),},

watch有两种方式：函数和对象形式【下面是对象形式】

  watch: {//监听bannerList数据的变化：由空数组到里面含有四个元素的数组//对象形式bannerList: {//如果执行handler方法，代表组件身上这个属性已经有了【含有数据的数组】//当前这个函数执行，只能保证bannerList数据已有，无法保证v-for已经执行结束//v-for执行完毕，才有结构【现在watch中没办法保证】//nextTick:在下次DOM更新  循环结束之后执行延迟回调，在修改数据后立即执行这个方法，获取更新后的DOMhandler(newValue, oldValue) {// 方法二：watch和nextTick()//this.$nextTick(() => {var mySwiper = new Swiper(// document.querySelector(".swiper-container"),this.$refs.mySwiper, //用ref{loop: true, // 循环模式选项// 如果需要分页器pagination: {el: ".swiper-pagination",clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},// 如果需要滚动条//scrollbar: {//el: '.swiper-scrollbar',// },});});},},},

computed常用来处理空对象和空数组的问题

:src="skuImageList[0].imgUrl"

因为skuImageList为空数组，他的【0】项undefined，他的imgUrl报错
所以子组件需要处理：

  <img :src="imgObj.imgUrl" />computed:{imgObj(){return this.skuImageList[0]||{}},

11 api 接口及测试接口是否有数据

```javascript
//获取search数据  /api/list  POST
//当前接口，给服务器传递一个默认参数，至少是一个空对象
export const reqGetSearch=(params)=>requests({url:'/list',method:'post',data:params})/**请求方式两种：*     axios('get')*     axios({})* post用data，get用params*/

测试接口是否有数据，在main.js中

import {reqGetSearch} from '@/api/index'
//至少是一个空对象
console.log(reqGetSearch({}),'12212');

12配置全局事件总线

配置全局事件总线：
在main.js中

new Vue({render: h => h(App),//全局事件总线$bus配置beforeCreate(){Vue.prototype.$bus=this;},//注册路由：底下的写法是kv一致省略v，切router小写//注册路由信息，当这里书写router时，组件身上都拥有$route,$router属性router,//注册仓库，组件实例身上会多出一个$store属性store,
}).$mount('#app')

 removeKeyword() {//通知兄弟组件Header清除关键字this.$bus.$emit('clear')},

 mounted(){//通过全局事件总线清除关键字this.$bus.$on('clear',()=>{this.keyword='';})},

13开发环境和生产环境

14 接口文档管理工具：Swagger, Apizza, Yapi

除了上面这三个，市面上还有很多其他的Api文档工具。如：eoLinker、ShowDoc、easydoc、MinDoc，word等

vue项目中的小知识--快捷键-vue插件版本号--vscode插件等相关推荐

[转]vue项目中，main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
vue与php接口对接,怎样使用vue项目中api接口
这次给大家带来怎样使用vue项目中api接口,使用vue项目中api接口的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 在axiosconfig目录下的axiosConfig.jsimpor ...
在vue项目中使用Antv-f2的小案例
目录一.两种引入方式 1.浏览器引入 2.通过 npm 安装二. 两种使用方式 1. 在配置了webpack或使用vue-cli构建的vue项目使用 2. 另一种使用方式是在html中直接使用三 ...
在Vue项目和微信小程序中使用阿里图标
文章目录在vue项目中正确使用iconfont的方法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...
在vue项目中使用echarts 阿星小栈
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 安装echarts依赖 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...

vue项目中的小知识--快捷键-vue插件版本号--vscode插件等