vue 全家桶学习踩坑
一、安装vue,并且搭建脚手架第一坑
使用npm 进行初始化，然后安装了vue和vue-cli，运行下列命令的时候发现“vue不是内部或外部命令”
vue init webpack vue-demo
解决方法：在 我的电脑–属性–高级属性–环境变量中，找到npm的位置，在path中添加“%NPM%qsdbbt”
或者
在 c 盘里搜索 vue.cmd；如果有修改安装位置，在修改后的盘符里搜索；也可以全局搜索 ：右键选择“打开文件所在目录”，将该目录添加至系统环境变量path中
第二坑
运行
vue init webpack vue-demo
发现
原因：这里的vue安装的是3.0+版本，在2.x版本中使用vue init webpack hello-world 已经替换为3.x版本中的 vue create hello-world。
官方文档上说 Vue CLI 2 是被 Vue CLI 3 覆盖的。如果你仍然需要使用旧版本的 vue init 功能还是可以实现的，只需要使用以下命令：
第三坑
打开vue源代码chapter1中的App.vue运行以下命令
npm start
出现错误
前往项目根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行"npm install"等待安装完之后，再次运行“npm run dev”，有些人的是马上就可以了，然而往往还会有人（譬如我）仍然报类似的错误，这个时候你只需要再次重复相同的操作即可，“一次不成再删再安装”！！！
第四坑
npm run dev 报错：missing script:dev
应该在正确的路径下运行此命令
借鉴：https://blog.csdn.net/dt1991524/article/details/82985570
第五坑
进入正确路径后运行npm run dev出现如下错误
Expected indentation of 0 spaces but found 4
Missing space before function parentheses
是缩进和空格不正确
根据代码修改即可
第六坑
运行 npm run dev出现：
You may use special comments to disable some warnings.
vue-cli脚手架关闭eslint的步骤：
1.打开 build文件夹下面的webpack.base.conf.js;
2.找到下面这段代码，并将它注释掉：
重启项目。
正常情况下这样就可以解决了。
第七坑 需要用axios实现跨域需求，在proxytable进行代理设置后刷新浏览器显示404错误
解决方案：重启服务器，关闭当前项目
第八坑 使用transition做过渡效果无效，原因是 只写了v-enter-active的样式，没写v-enter的样式
第九坑 使用axios后发现数据没有渲染到页面上
解决方案：把mockServer的service用nodejs打开
第十坑 vue中如何使用less
step1:安装依赖npm install less less-loader --save
step2:修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”,
},
第十一坑 如何实现跨域？
st0:做好service.js文件和db.js文件（传的数据）
st1:安装axios
st2:配置代理服务器 在config的index.js中配置代理服务器
st3:在需要使用的.vue文件中引入 axios
import axios from ‘axios’
st4:在script部分使用，从设置的接口导入（async await axios.get），存储(data [ ])，才在template中引用([])
第十二坑
做轮播图的时候
问题1：v-for渲染出来的图片成一列，只需要显示一张
解决：在父组件中渲染图片所在的区域设置overflow:
问题2：按上述方法解决后发现轮播的按钮不见了，因为原来绝对定位设置的是
bottom:20px
解决：把bottom改成 了top
问题3：设置自动播放的时候，出现如下错误
原代码如下：
利用props把父组件的数据传到子组件来，this.data本意是指出现的图片形成的数组，但这里好像没法出现。
解决方法：一样的代码，但是使用es6箭头函数的写法就不会报错
第十三坑 轮播图从最后一张跳到第一张的时候会出现闪动
解决：把第一张的图片再次添加到列表尾部，实现无缝衔接