开发过程中遇到的问题

这两天做了一个小页面，项目搭建用的是vue/cli，过程中遇到了一些棘手问题，现在回过头来总结一下。

vue-cli 3 脚手架搭建（node版本要8.9+）：

1. npm install @vue/cli -g
2. vue.create myApp
3. npm serve 启动项目

搭建过程中出现的问题：

问题一

error An unexpected error occurred: "https://registry.npm.taobao.org/animate.css: tunneling socket could not be established, cause=getaddrinfo ENOTFOUND web-proxy".

“https://registry.npm.taobao.org/animate.css:无法建立隧道套接字”，taobao镜像不可用，还原成npm 的

解决方案

执行 npm config set registry https://registry.npmjs.org –global

问题二

通过vue脚手架搭建，执行命令 npm install @vue/cli -g 出现报错

解决方案

改用cnpm install @vue/cli -g,怀疑是由于下载时间太久的原因。

问题三

报错eslint的问题

解决方案

删除node-module,重新install

页面开发遇到的相关问题

问题一

父元素嵌套一个非空子元素，子元素margin-top不生效

解决方案

给父级加padding-top:1

问题二

echarts按需引入，绘制饼图，图例不显示的问题

解决方案

引入legend组件

问题三

通过加载插件的方式引入Message，导致每次页面刷新的时候会自动弹出一个通知消息（该情况只在引入局部插件才会引起）

解决方案

通过加载组件的方式引入即可

// vue.use(Message) 
Vue.component(Message.name, Message)

关闭eslint

新建vue.config.js文件

module.exports = {
    lintOnSave:false
}