一、 介绍  vue-cli3 
    使用 类似react create-react-app 一样  安装以后可以通过指令  vue 执行相应服务和操作
二、 开始
    1. 卸载 旧版本vue-cli  
        $ npm uninstall vue-cli -g
        
    2. 全局安装 @vue/cli
        $ npm install @vue/cli -g
        注：  nodeJs 大于 8.9 node -v  查看版本
        
    3 查看 版本   
        $ vue --version  || vue -V
        
    4 查看命令 
        $ vue --help    || vue -h
        
    5 创建 项目  
        $ vue create <pro-name>
            根据情况选择不同的选项  刚开始只有  default() 和  Manually select features 
            两个 一个是默认以及基本配置的模板  另一个需要手动配置   
            根据需要自动选择   根据 (上下键选择 ) 使用(空格选中项)  使用(回车键) 确定
        当然cli3推出 vue ui command 创建项目  
          参考： https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui
        
    6 启动项目
        $ cd <pro-name> && npm run serve 
            启动  localhost:8080
    
    7 打包 
        $ npm run build
        
三、语法  (针对单文件组件)
    1. 结构 *.vue
      eg: app.vue
        <template>   // 模板  html
            <div>
                ...
            </div>
        </template>
        <script>    // 逻辑部分 js
            export default {
              name: 'App',
              data () {
                  return { }
              },
              methods:{ }
            }
        </script>
        <style>  // 样式 css
            
        </style>
    
    2 数据渲染
      eg: app.vue
          <template>
            <div>{{ msg }}</div>
        </template>
        <script>
            export default {
              name: 'App',
              data () {
                  return { 
                      msg:'hello world!!'
                  }
              }
            }
        </script>
        注： 数据绑定在this上   获取  直接是 this.<dataName>    设置  this.<dataName> = <new Data>
        
    3.样式渲染
      a.样式书写 
        eg:app.vue
        <template>
            <div>
                <p class='title'>hello world!!</p>
            </div>
        </template>
        <script>  
            ...
        </script>
        <style>
            .title{
                margin:0;
                padding:0;
                font-size:18px;
            }
        </style>
        注： style 可以添加 属性 scoped = 'true'  表示此样式属于此组件
                添加  lang="scss"   使用sass   或者  lang="less"  使用less
                eg：  <style lang="less" rel="stylesheet/less" type="text/css" scoped>
    
        b.class 类渲染
          eg: app.vue
             <template>
                <div>
                    <p v-bind:class='{active:isActive}'>hello world!!</p>    // v-bind:class  可简写  :class
                </div>
            </template>
            <script>  
                export default {
                    name:'App',
                    data(){
                        return {
                            isActive:true
                        }
                    }
                }
            </script>
            <style>
                .active{
                    color:'#333';
                }
            </style>
        
        c.行内样式
          eg： app.vue
              <template>
                <div>
                    <p :style='{color:color}'>hello world!!</p>
                </div>
            </template>
            <script>  
                export default {
                    name:'App',
                    data(){
                        return {
                            color:'#333'
                        }
                    }
                }
            </script>
          
    4  条件渲染  
      a. v-if  v-else-if v-else 
          eg: app.vue
              <template>
                <div>
                    <p v-if='type===1'>type等于1</p>
                    <p v-else-if='type===2'>type等于2</p>
                    <p v-else>type不等等于1和2</p>
                </div>
            </template>
            <script>  
                export default {
                    name:'App',
                    data(){
                        return {
                            type: 1
                        }
                    }
                }
            </script>
        
        b.v-show
              <template>
                <div>
                    <p v-show='type===1'>type等于1</p>
                    <p v-show='type===2'>type等于2</p>
                </div>
            </template>
        
        注: v-if 和 v-show
            v-if 只有条件为真的时候才会真正的渲染   v-show都会好渲染 只是条件为真的是 display:block 为假 display:none 
            使用：  频繁的切换显示使用 v-show  条件渲染 显示 用 v-if 按照具体的功能来定
        
    5  循环渲染
      eg : app.vue
          <template>
            <div>
                <div v-for='item in dataList' :key='item.id'>
                    <p>姓名：{{item.name}}</p>
                    <p>年龄：{{item.age}}</p>
                </div>
            </div>
        </template>
        <script>  
            export default {
                name:'App',
                data(){
                    return {
                        dataList:[
                            {id:1,name:'张三',age:16},
                            {id:2,name:'李四',age:20},
                        ]
                    }
                }
            }
        </script>
      注：可以使用  of 代替 in 作为分隔符     <div v-for='item of dataList' :key='item.id'>
          v-for 参数 可选   <div v-for='(value, key, index) in dataList' :key='item.id'>
        
    6  事件
      eg: app.vue
          <template>
            <div>
                <button v-on:click='handleClick'>单击</button>    // v-on:click  可以简写  @click
                <button>双击</button>    
            </div>
        </template>
        <script>  
            export default {
              name: 'App',
              data () {
                  return {}
              },
              methods:{
                  handleClick: function(){ ... }
              }
            }
        </script>
        注： 事件装饰符
            .stop  阻止事件冒泡    和 event.stopPropagation()  eg <button @click.stop="handleClick">点击</button>
            .prevent  阻止默认事件    和 event.preventDefault()  eg <a @click.prevent='handleClick'>点击</a>
            .self        当event.target是当前元素才执行    
            ...
            当然还有其他时间的修饰符    <input v-on:keyup.enter="submit">
            参考： https://cn.vuejs.org/v2/guide/events.html
    
    7    表单数据绑定
        v-model 
            eg: app.vue
            <template>
                <div>
                    <div>
                        <p>普通输入框</p>
                        <input type="text" v-model="normalInp"/>
                    </div>
                    <div>
                        <p>多行输入框</p>
                        <textarea name="" rows="" cols="" v-model="inPtext"></textarea>
                    </div>
                    <div>
                        <p>下拉框</p>
                        <select v-model="sele">
                            <option disabled value="">--请选择--</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                    <div>
                        <p>单选按钮</p>
                        <input type="radio" value="a" v-model="radioVal">
                        <input type="radio" value="b" v-model="radioVal">
                    </div>
                    <div>
                        <p>一个项的复选框 </p>
                        <input type="checkbox" v-model="checks"/>
                    </div>
                    <div>
                        <p>多个项复选框</p>
                        <input type="checkbox" v-model="checkList" value="a"/>
                        <input type="checkbox" v-model="checkList" value="b"/>
                        <input type="checkbox" v-model="checkList" value="c"/>
                    </div>
                </div>
            </template>
            <script>  
                export default {
                  name: 'App',
                  data () {
                      return {
                              normalInp: '',
                              inPtext: '',
                              sele: '',
                              radioVal:'',
                              checks: false          // 单个复选框  绑定的是布尔值
                              checkList: []            // 多个复选框  绑定同一个数组
                              
                      }
                  }
                }
            </script>
        注:  v-model 修饰符  .trim 去除收尾的空白字符   eg     <input type="text" v-model.trim="inputVal"/>
                         .number  转为数字
                         ...
        
    8.prop  传参
        a. 父组件   ==> 传参 ===> 自组件
            eg： app.vue
                <template>
                    <div>
                        <Child msg='title'/>
                    </div>
                </template>
                <script>  
                    import Child from './Clicd.vue';
                    export default {
                      name: 'App',
                      data () {
                          return {
                              title: 'hello world!!'
                          }
                      },
                      components: {
                          Child: Child
                      }
                    }
                </script>
                
                Child.vue
                <template>
                    <div>
                        <h1>{{ msg }}</h1>
                    </div>
                </template>
                <script>  
                    import Child from './Clicd.vue';
                    export default {
                      name: 'App',
                      props: {
                        msg: String     // 验证props
                      }
                    }
                </script>
        
        b. 子组件 ===> 传参 ===> 父组件
            eg： app.vue
                <template>
                    <div>
                        <Child @handleClick='pClick'/>   // 通过事件传参
                    </div>
                </template>
                <script>  
                    import Child from './Clicd.vue';
                    export default {
                      name: 'App',
                      data () {
                          return {
                              title: 'hello world!!'
                          }
                      },
                      components: {
                          Child: Child
                      },
                      methods:{
                          pClick:function(data){
                              console.log(data)  // 回调得到数据
                          }
                      }
                    }
                </script>
                
                Child.vue
                <template>
                    <div>
                        <button @click='cClick'>点击传参</button>
                    </div>
                </template>
                <script>  
                    import Child from './Clicd.vue';
                    export default {
                      name: 'App',
                      methods:{
                          cClick:function(){
                              this.$emit("handleClick",'hello this is pramas');  //   handleClick 对应传入的  第二个参数为数据
                          }
                      }
                    }
                </script>
            
        
        
        9.路由  
            step1: 定义路由 
                eg: router.js
                import Vue from 'vue'
                import Router from 'vue-router'
                import Login from './components/Login.vue'
                import Main from './components/Main.vue'
                
                Vue.use(Router)
                
                export default new Router({
                  mode: 'history',
                  base: process.env.BASE_URL,
                  routes: [
                    {
                      path: '/',
                      name: 'login',
                      component: Login
                    },
                    {
                      path: '/main',
                      name: 'main',
                      component: Main
                    }
                  ]
                })
            
            step2: vue使用路由
                eg: main.js
                import Vue from 'vue'
                import App from './App.vue'
                import router from './router'
                
                new Vue({
                  router,
                  render: h => h(App)
                }).$mount('#app')
            
            step3: 定义路由显示位置   <router-view/> 
                <template>
                  <div id="app">
                    <router-view/>
                  </div>
                </template>
        
            step4: 路由跳转
                <template>
                  <div>
                    <router-link to="/"> Login </router-link> |
                      <router-link to="/main"> Main </router-link>
                  </div>
                </template>
                
            路由的一些用法：  参考  https://router.vuejs.org/ 
                1.动态路由  可以使用 " : "表示
                    eg:
                        routes: [
                            {
                              path: '/home/:id',
                              name: 'home',
                              component: Home
                            },
                                    
                2.路由变化  
                    eg: main.vue
                    <template>
                      <div>
                        <h1>This is an about page</h1>
                        <h2>{{$route.params.id}}</h2>
                      </div>
                    </template>
                    <script>
                        export default {
                            name:'main',
                            watch: {
                                '$route' (to, from) {
                                      console.log(to)
                            }
                      }
                        }
                    </script>
                    
                3.路由嵌套
                    配置路由 router.js
                    routers:[
                        {
                            path:'/main/',
                            name:'main',
                            component: Main,
                            children:[            // 添加 children
                                {
                                    path:'',
                                    name:'page1',
                                    component: Page1
                                },
                                {
                                    path:'page2',
                                    name:'page2',
                                    component: Page2
                                },
                                {
                                    path:'page3',
                                    name:'page3',
                                    component: Page3
                                }
                            ]
                        }
                    ]
                
                4.js 路由跳转
                    this.$router.push('/main')
                    this.$router.push({ path: 'main' })
                    this.$router.push({ name: 'main', params: { id: 12 } })
                    this.$router.push({ path: 'main', query: { id: 1 } })
                    this.$router.replace()
                    this.$router.go(n)
                
                5. 路由拦截 处理
                    eg：mian.js
                    import Vue from 'vue'
                    import App from './App.vue'
                    import router from './router'
                    
                    router.beforeEach((to, from, next) => {   // 在路由跳转之前进入 这里面可以对路由进行设置等
                      next()
                    })
                    
                    new Vue({
                      router,
                      render: h => h(App)
                    }).$mount('#app')
                    
                6 对路由设置操作还有以下几个函数
                    beforeRouteEnter(to,from,nex){...}
                    beforeRouteUpdate(to,from,nex){...}
                    beforeRouteLeave(to,from,nex){...}
                    
                7 懒加载路由
                    {
                        path: '/home',
                        name: 'home',
                        // which is lazy-loaded when the route is visited.
                        component: () => import('./components/Home.vue')
                     }
                
        10.服务 
            使用   axios  
            step1: 下载
                $ npm install axios --save
            
            step2: 导入 并且 在Vue上挂载axios方法
                eg: main.js
                        import Vue from 'vue'
                        import App from './App.vue'
                        import router from './router'
                        import axios from 'axios'   // 导入 
                        Vue.config.productionTip = false
                        
                        Vue.prototype.axios = axios
                        
                        new Vue({
                          router,
                          render: h => h(App)
                        }).$mount('#app')
                
            step3: 使用
                eg: Login.vue
                    <template>
                        <div>
                            <button @click='handleClick'>点击发送请求</button>
                        </div>
                    </template>
                    <script>
                        export default {
                            name:'Login',
                            methods: {
                                handleClick: function(){
                                    var _this = this;
                                    _this.axios.get('http://localhost/getData')
                                        .then(function(data){
                                            console.log(data)
                                        })
                                        .catch(function(err){
                                            console.log(err)
                                        })
                                }
                            }
                        }
                    </script>
                    注： axios的一些method
                    GET
                        axios.get(url).then(...).catch(...)
                        axios.get(url,{
                            params:{
                                userName:...,
                                pws:...
                            }
                        }).then(...).catch(...)
                        
                    POST
                        axios.post(url,{
                            userName:'',
                            pws:''
                        }).then(data => { ... }).catch(err => { ... })
                        
                    语法： axios.<method>(url,<params>,<options>).then( ... ).catch( ... )
                    一些默认配置
                        axios.defaults.baseURL = 'https:xxxx.com';
                        axios.defaults.headers.common['Authorization'] = token;
                        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
                        
            step4 服务拦截器
                eg: mian.js
                import Vue from 'vue';
                import axios from 'axios';
                    // 请求拦截器
                axios.interceptors.request.use(function (config) {
                      // 发送请求之前
                      // do someThing
                      return config
                }, function (error) {
                      // do someThing
                  return Promise.reject(error)
                })
                // 响应数据拦截器
                axios.interceptors.response.use(function (value) {
                      // do someThing
                      return value.data
                }, function (error) {
                      // doSome thing
                      return Promise.reject(error)
                })
                
                Vue.prototype.axios = axios;
                    

        11.vue的 ui-框架
            a.Element   饿了么 前端开发的开源ui 框架
                地址： http://element-cn.eleme.io/#/zh-CN
                
            b.vuetify  
                地址： https://vuetifyjs.com/zh-Hans/
                
            c. vue-strap   基于 Vue.js 的 Bootstrap 组件
                地址： http://yuche.github.io/vue-strap/
            
            d.iview   基于 Vue.js 的开源 UI 组件库
                地址： https://www.iviewui.com/

        12.介绍vue element使用  针对@cli3
            step1:
                $ vue add element
                
            step2: 根据提示选择项目 之后就下载element
            
            step3: 根据需求   查找相应的组件   http://element-cn.eleme.io/#/zh-CN/component/installation

                 eg：
                <template>
                    <div>
                        <el-button type="primary">主要按钮</el-button>
                          <el-button type="success">成功按钮</el-button>
                    </div>    
                </template>