webpack相关

1. vue-cli 创建项目 主流使用webpack模板进行创建

vue init webpack vuedemo //初始化webpack项目

npm install //安装项目需要依赖的库

npm run dev // 使用开发模式运行项目

细节：

创建webpack项目时，build选第一个，standalone，后面都选择no，比如install vue-router 为no

项目需要安装一些模块

  1.1. 安装vue-router

  1.2. 安装element-ui（看需求）

  1.3. 安装sass加载器

  1.4. 安装 axios

  执行npm install

2. webpack项目内容

  index.html 首页

  main.js 程序入口

  页面主要内容都保存在xxx.vue文件中，xxx.vue文件实际就是一个Vue对象，也是Vue组件，万事万物皆组件

  一个vue文件三部分组成 template（html）、script(js)、style(css)

  script -> export default

  template标签中需要一个根标签 <div></div>

3.  创建新的vue组件，需要全局注册后使用，在main.js中注册

  注册方式：

    在main.js中

    import xxx from './components/Header.vue'

    Vue.component('MyHead', Header)

    注册完在其他Vue中就可以使用 <MyHeader></MyHeader>

4. 组件间传参数

4.1 父传子

      父组件 标签中 :xxx="123"

      子组件 props: ['xxx']

      {{xxx}}使用

      props写法有两种：

      1. props:['xxx']

      2. props:{xxx:{type:string,required:true,default:'123'}}

4.2 子传父

      props：{'btnfn':{type:Function}}

      通过函数方式传递执行

      方法2 发射事件

      子控件中 this.$emit('键', '值');

      父组件中，子组件标签中使用@键="属性=$even"