项目搭建

1.通过vue ui 创建项目，选择包管理工具npm/yarn，选择yarn的优点是不需要*，npm有时候需要*才会快一点

2.选择手动配置项目，选择到babel，router，vueX，css预处理器。babel可以将一些高级语法进行转化，比如ES7/ES6的语法

3.选择是否使用路由的history模式，history模式就是没有#号的，选择否，一般都使用哈希模式

cli3跟cli2相比少了build和config目录，需要对webpack进行配置的话，需创建vue.config.js文件(也可以配置css预处理器)

 

vscode扩展安装推荐：

1.Vue VSCode Snippets 输入关键字自动补全代码

 

父子组件传值：

1.父传子：

 

想要在父组件中直接获取到子组件里面的内容

 

也可以通过ref属性

2.子组件向父组件传值，一般通过事件触发（如按钮点击）：

 

非父子传值：

通过事件总线进行传值

需要在main.js中先进行定义

Vue.prototype.$bus = new Vue()

发射消息

imgLoad() {

//往事件总线发射数据

this.$bus.$emit('imageLoad')

}

监听消息

最好放在mouted中 //等组件创建完之后监听图片加载完成

this.$bus.$on('imageLoad', () => { console.log('bus') })

 

 

 

ESLINT：

开启ESLINT后注册了组件，代码检查到你注册了组件但没有使用：component has been registered but not used

解决方案：eslintrc.js文件，在该js模块中找到rules，增加上"vue/no-unused-components": "off"

 

 

路由：

路由懒加载写法，以下是ES6写法：

{
    path: '/about',
    component: () => import('../components/About')
},

路由正常加载和懒加载的区别：

正常方式：进入页面的时候就加载这个组件，路由过多时一起加载会造成速度变慢

懒加载：进入这个页面才进行加载这个组件，能极大提升应用加载速度