vue-基础操作

安装和启动
查看node版本：npm -v
npm版本升级：npm install -g npm
版本构建：npm install -g @vue/cli    npm   uninstall -g vue-cli
项目创建：vue init webpack myProject
创建element-ui：npm install element-ui --save
创建axios：npm install axios --save
    axios请求的拼接形式都是get请求，
        如果用post的请求需要导入qs库 qs.stringfy()
        将参数对象转换成get请求拼接的形式
      设置全局属性:(main.js->import axios from 'axios'->Vue.prototype.$http = axios-->page:this.$http.post)
引入require.js:npm install rquire.js
安装ES6转码器：npm install -g es6-module-transpiler
                           将 ES6 模块文件转码。
              compile-modules convert file1.js file2.js
              -o参数可以指定转码后的文件名。
              compile-modules convert -o out.js file1.js
     注：在main.js中
     import ElementUI from "element-ui"
     import 'element-ui/lib/theme-chalk/index.css'
     Vue.use(ElementUI)
安装webpack：npm install webpack -g  
项目启动：cd myProject
         npm install
         npm run dev
创建淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack-dev-server(当前目录下镜像命令):cnpm install webpack-dev-server
打包项目：npm run build
设置服务器：npm  i  -g http-server
                    hs -o  -p  8888

安装骨架屏：npm install vue-skeleton-webpack-plugin
路由懒加载：npm install babel-plugin-syntax-dynamic-import
预加载：npm install prerender-spa-plugin -D
*************************************
文档结构
node_modules；引用的所有模块包
src/App.vue:主页面
src/main.js:引入外部控件、路由、样式
src/components:定义控件（目前感觉和定义的页面一样）
src/page:具体页面
index.html:主页面结构
***************************************
路由配置
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/about'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
},
    {
      path: '/about',
      name: 'about',
      component: About,
      children: [
        {
          path: '/',
          component: page1
        },
        {
          path: 'info',
          component: page2
        }
      ]
}
  ]
})
*************************************** 
父子组件传值
父组件向子组件传值成功
总结一下：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

子组件向父组件传值成功
总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

兄弟组件传值
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，
此时函数中的this已经发生了改变，可以使用箭头函数。

实例如下：

我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue'

export default new Vue

***************************************
vuex
状态管理模式，组件的状态管理,中央管理处

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        //存放组件之间共享的数据
        count: 0,
        name: "天才"
    },
    mutations: {
        //显示的更改state中的数据
        // increment: state => state.count++, 
        increment: (state, value) => state.count += value,
        decrement: state => state.count--,
    },
    getters: {
        //过滤stat中的数据
        getAge: function(state) {
            return state.name;
        }

    },
    actions: {
        /***
         * context：context是与 store 实例具有相同方法和属性的对象。
                可以通过context.state和context.getters来获取 state 和 getters。 
         * dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。
                 incrementAction: function(context, data) {}
         * 
         * 
         */
        incrementAction: function(context, value) {

            setTimeout(function() {
                context.commit('increment', value);
            }, 1000);
        }
    }

})
 

      //  this.$store.commit("increment")
      this.$store.dispatch("incrementAction", 10);

***************************************
//缩写
v-bind:href->:href
v-on:click->@click
*************************************
//var data = { a: 1 }
//创建Vue实例
var vm = new Vue({
  el: '#example',
  data: data
})

//当实例创建完成时
     new Vue({
            created: function() {
                console.log("这边是本天才创建");
            }
        })
        
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

//格式化排版错误
App.vue页面不能格式化(可以删除eslint校验：webpack.base.conf.js里面删掉createLintingRule)
export default {
  name: 'app'
}
报错：

  ✘  http://eslint.org/docs/rules/no-tabs  Unexpected tab character

*****************************************************************
ECMAScript整理
node环境对es6的支持->npm install -g es-checker
presets字段设定转码规则，官方提供以下的规则集。
# 最新转码规则->$ npm install --save-dev babel-preset-latest
# react 转码规则->$ npm install --save-dev babel-preset-react
# 不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
1、let 
       a.和var作用一样
       b.但是有作用域的限制
       c.必须先声明在使用变量
       d.如果在一个作用域中有let先执行let命令
       e.在一个作用域内，不能重复声明一个变量
2、const
        a.大部分和let一样，但是是数据为只读不可更改
        b.const foo = Object.freeze({});将对象冻结
************************************************        
ES5声明方法：var、function
ES6声明方法：var、function、let、const、import、class
*************************************************
export:对外提供的接口，必须和模块内部一一对应(放在模块顶层，块级作用域中无法实现静态优化)
1.export   var  a=1;
2.var  a=1;
  export {a};
3.var a=1;
  export {a as b};
**************************************************
import(引用js文件"./aa"表示当前目录不能省略->"aa")
************************************************
export
export default 42;本质上将值赋值给default
***************************
Vue
Vue 就是一个构造函数，生成的实例是一个巨大的对象，
可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面：
new Vue({
    el: '#app'
    ...
})
export default {} 这是在复用组件的时候用到的。
假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，
那么就要用 ES6 的 import/export 语法 ，
在文件 A 中定义输出接口 export **，在文件 B 中引入 import **，
然后再生成一个 Vue 实例 new Vue (**)，把引入的组件用起来，
这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
************************************************
CommonJS
************************************
地址连接：
html配置地址：
    <router-link to="/cards">    </router-link>
  a:link{
          text-decoration: none;
  }
js配置地址：
    this.$router.push("/cards");