vue基础知识——进阶一

一、如何初始化一个vue项目？

vue init webpack vuetest
cd vuetest
npm run dev

如果你在npm run dev的时候报了如下的错，请更改：config文件夹里的index.js 里的 host ,把后面的host改为你本地的ip地址即可

报错图片.png

更改代码.png

二、vue-cli的作用？

主要作用：目录结构、本地调试、代码部署、热加载、单元测试。

三、使用vue-cli和不使用写代码的区别？

使用vue-cli，结构分开写（.vue的文件）

不使用vue-cli（.html文件）

    
    
    



    {{ message }}

四、vue生命周期

可参考：
https://segmentfault.com/a/1190000014640577
非常非常有参考价值

之前面试，有个面试官问我：什么时候用 beforeDestroy？
      一般在做项目的购物车模块时候会用到， 选完产品之后， 到结账页面的时候 就用到 beforeDestroy (页面被销毁前)，把购物车数据提交到 后台； 就是你在加购物车 ，然后点了返回。组件要销毁了。你得把数据传上去。

什么时候用 destroyed？
      在使用echarts画图表的时候，用到了destroyed
      前提：使用echarts，图表的尺寸会根据屏幕大小来展示，也有可能用户会随意变化窗口的大小。我们要监听页面的大小是否更改：

methods: {
  /* 监听浏览器屏幕重置 */
    resize() {
        let echartsLine = this.$echarts.init(this.$refs['**'], 'macarons');
        echartsLine.resize();
    }
},
mounted() {
      window.addEventListener('resize', this.resize);
},
destroyed() {
      window.removeEventListener('resize', this.resize);
}