一、如何初始化一个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的文件）
<template>
<div >
HelloWorld
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style>
</style>
不使用vue-cli（.html文件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
四、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);
}
网友评论