VUE-cli

笔记

安装node  nodejs.org中下载nodejs
  
cmd  node -v  查看node的版本号
 安装成功

安装npm

安装vue项目问题
1.时间
2.node_modules文件  cnpm i

创建一个路由

1.在components文件夹 创建一个vue的文件
2.在router引入文件
import MyVue from '@/components/MyVue'
{
      path: '/',
      name: 'MyVue',
      component: MyVue
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }

1.vue-cli 脚手架搭建项目

    https://www.jianshu.com/p/02b12c600c7b
    环境准备：
        1.安装node  node -v
        2.安装淘宝镜像  https://www.jianshu.com/p/eef54b38b2a7
            npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org
    1.第一步：安装vue-cli
        cnpm install vue-cli -g      //全局安装 vue-cli
        查看vue-cli是否成功，不能检查vue-cli,需要检查vue
        vue list
    2.第二步 创建项目
        vue init webpack  ”项目名称“
    3.运行
        cnpm install
        cnpm run dev

2.去除警告

    1.config中的index.js 
        useEslint: false,
    2.找到build下面的webpack.base.conf.js
         // ...(config.dev.useEslint ? [createLintingRule()] : []),
    3.重启项目

3.创建路由

    router文件夹index.js
    点击跳转：
	this.$router.push('/test');
	this.$router.push({path:'About',query:{name:'xiaoxiao'}});
    获取跳转传参：{{this.$route.query.name}}

4.父组件使用子组件

    第一步：
        import Login from '@/components/Login'
        import Register from '@/components/Register'
    第二步：
        components: {
            Login,Register
        }
    基本结构
        export default {
            name: 'HelloWorld',
            data () {
                return {
                msg: '我是父组件传过来的',
                state:true
                }
            },
            created(){
                console.log(123)
            },
            methods:{
                share(){
                console.log(123);
                }
            },
            components: {
                Login,Register
            }
        }

5.传值
5.1父组件向子组件传值 prop

    https://www.cnblogs.com/wzfwaf/p/11280153.html
    父组件：
         <router-view v-bind:fData="data1" :fMessage="data2"></router-view>
    子组件：
        props: ['fData', 'fMessage'],
        <p>第一个数据：{{fData}}</p>
        <p>第二个数据：{{fMessage}}</p>

5.2子组件向父组件传值 $emit

    子组件: <span>{{childValue}}</span>

 <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
    export default {
        data () {
            return {
                childValue: '我是子组件的数据'
            }
        },
        methods: {
            childClick () {  
                    this.$emit('childByValue', this.childValue)
            }
        }
    }
    父组件
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
    methods: {
        childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
        }
    }

5.3父组件调用子组件的方法通过ref

    在DOM元素上使用$refs可以迅速进行dom定位，类似于$("selectId")
    使用this.$refs.paramsName能更快的获取操作子组件属性值或函数

    子组件：
    methods:{
        childMethods() {
            alert("I am child's methods")
        }
    }
    父组件： 在子组件中加上ref即可通过this.$refs.method调用
    <template>
        <div @click="parentMethod">
            <children ref="c1"></children>
        </div>
    </template>

    <script>
        import children from 'components/children/children.vue'
        export default {
            data(){
            return {
            }
            },
            computed: {
            },
            components: {      
            'children': children
            },
            methods:{
                parentMethod() {
                    console.log(this.$refs.c1) //返回的是一个vue对象，可以看到所有添加ref属性的元素
                    this.$refs.c1.childMethods();
                }
            },
            created(){
            }
        }
    </script>

5.4 可以通过$parent和$children获取父子组件的参数

我们可以使用$children[i].paramsName 来获取某个子组件的属性值或函数，$children返回的是一个子组件数组
https://blog.csdn.net/lianwenxiu/article/details/87898688

6.vuex

    https://blog.csdn.net/wopelo/article/details/80284088
 兄弟之间的传值 使用vuex

npm install --save-dev vuex

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'; 

Vue.config.productionTip = false

//注意下面的代码
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{},
    getters: {},
    actions: {},
    mutations: {}
});

//注意router选项，此处的写法等同于store: store
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

第三步骤：
      computed:{
            name(){
                return this.$store.state.name
            }
        }

7.axios

$ npm install axios

main.js
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.axios = axios

this.axios.get("../../static/api/home.json").then((res)=>{
          console.log(res.data.data.listInfo);
          this.dataList  = res.data.data.listInfo
        })

8.项目打包 npm run build