新建完项目，先做好准备工作

1 定义全局路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect : '/home',
      name: 'index',
      component : () => import('@/page/home.vue')
    },
    {
      path: '/detail/:codeId',
      name: 'detail',
      component : () => import('@/page/detail.vue')
    },
    {
      path: '/list',
      name: 'list',
      component : () => import('@/page/list.vue')
    },
    {
      path: '/home',
      name: 'home',
      component : () => import('@/page/home.vue')
    },
  ]
})

<!--路由途径中/就是首页的意义了-->

1.1路由懒加载，当组件太多的时刻，
vue这类单页面应用，假如没有应用懒加载，应用webpack打包后的文件将会非常的大，形成进入首页时，须要加载的内容过量，时候太长，会出啊先长时候的白屏，纵然做了loading也是不利于用户体验，而应用懒加载则可以将页面举行分别，须要的时刻加载页面，可以有用的分管首页所负担的加载压力，削减首页加载用时
简朴的说就是：进入首页不必一次加载过量资本形成用时太长！！！

实在懒加载非常简朴,几个resolve就好了

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/index.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})

2、axios 相似就是jq的ajax

Vue.prototype.$axios = axios;
运用的时刻，直接
this.$axios

3、main.js的设置

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)
Vue.config.productionTip = false/*临盆提醒*/
Vue.prototype.$axios = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
<!--运用的router，vuex要在底下申明，引入的外部插件要用vue.use去运用-->

4、app.vue平常都不必动，用作来做路由跳转

<template>
  <div id="app">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
  <keep-alive>
      <router-view/>
  </keep-alive>
  </div>
</template>

<!--keep-alive 用作路由页面的缓存，然后可以再加上transition-->

<style scoped>
<!--如许加上 scoped只对当前组件见效的css代码-->

5 一般的一个组件

import {apiControll} from "@/api/api.js"
    import detailList from "@/components/detail/detail_list"
    import serachInput from "@/components/common/search_input";
//    import Watermark from "@/tools/water"/*水印*/
    import {watermark} from "@/tools/tools"/*水印*/
    export default{
        components:{
            detailList,
            serachInput,
        },
        data(){
            return{
                codeData:[
                    {
                        name:"张三",
                        sex :"男",
                        mingzu :"汉",
                        birthday :{
                            year:2017,
                            month:7,
                            day:21
                        },
                        adress : "汉阳区分局秦川街派出所下陈家湖170号",
                        codeNunber :"4400652199852521223",
                        img :""    ,            
                        shedu : false,
                        weifa  :true,
                        zaitao : true,
                        origin : "上海市局科技处供应数据",
                        date   : "2018-7-16 12:23" ,
                    },
                    {
                        name:"张三",
                        sex :"男",
                        mingzu :"汉",
                        birthday :{
                            year:2017,
                            month:7,
                            day:21
                        },
                        adress : "汉阳区分局秦川街派出所下陈家湖170号",
                        codeNunber :"4400652199852521223",
                        shedu : true,
                        weifa  :false,
                        zaitao : false,
                        origin : "上海市局科技处供应数据",
                        date   : "2018-7-16 12:23" ,
                    },
                ],
                diy_router:"上海铁路公安",
//                codeId :"",
            }
        },
        computed:{
            codeId(){
                if(this.$route.params.codeId==undefined){/*返回退后会变成undefined*/
                    return '上海铁路公安';
                }
                return this.$route.params.codeId;
            }
        },
        activated(){/*当前页面有水印*/
            watermark(this.codeId,'.detail_list_all');
        },
        methods:{
            search_val(val){
                watermark(val,'.detail_list_all');
                this.getList(val);
            },
            getList(val){
                console.log(apiControll(val));
                
            }
        
        }
    }
    <!--这里包含了引入组件-->
    <!--引入的组件注册-->
    <!--引入js文件的要领要用{}包住-->
    <!--data中数据的定义，-->
    <!--盘算属性的运用，-->
    <!--acitvated 是当前这个组件处于激活时刻用的，比mounted，created好是因为这个属性，是因为写在内里的要领是可以屡次运转的-->
    

6 一个简朴的组件组成

<template>
    <section>
        <form action="" onsubmit="return false;"><!--手机测试的话，改事宜，挪用搜刮-->
          <mt-search v-model="searchVal" 
              :autofocus="autofocus"  
              placeholder="请输入身份证号"
               @keyup.native.enter="search(searchVal)"
                >
          </mt-search>
        </form>
    </section>
</template>

<script>
    import { Search }from 'mint-ui'
    export default{
        component:{
            Search
        },
        props:{
            fouce:Boolean,
            searchValog :String,
        },
        data(){
            return{
                searchVal:"",
                autofocus:true,
                result:"www",
            }
        },
        methods:{
                search(value){
                    this.$emit('search_val',value);//
                    document.activeElement.blur();/*封闭搜刮框*/
                }
        },
        watch:{/*看管值的变化,前后跳页时刻运用*/
            searchValog(val){
                this.searchVal = val;
            }
        },
        mounted(){
            this.searchVal = this.searchValog;
        }
        
    }
</script>

<!--平常，一个组件用一个section包住，绑定属性用:,绑定事宜用@,-->
<!--传进来的参数 用props接收，可以数组或许对象的情势去写，对象内里也有对象-->
<!--也是可以的。-->

<!--this.$emit('search_val',value);-->
<!--这个是发射事前，在父亲组件绑定这个事宜，这个事宜就可以发生了。-->

======================================================

7 平常我们做挪动端项目，须要用手机才真正测试出东西，那末正在开辟的当地环境中的vue项目，怎样才让
手机接见呢？

起首，手机和电脑处于统一个收集
电脑 调出cmd敕令窗口，查找本身的ip地点 ：ipconfig
ipv4 就是本身本机的ip地点了。比方 192.168.1.126

然后再vue项目中 config文件夹下的index.js

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST<!--修正这里-->
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

把localhost中的地点，改成是 本身电脑的ip地点，这时刻，该项目中的地点就变成是这个地点了，再用手机翻开这个地点就好了

======================================================

8 vue的项目和php的项目，域名是绝对不争执的，意义就是，当运用vue的项目的时刻，可以开php，或许运用easymock，yapi去模仿接口的，这个是没有题目的

======================================================

9 computed属性，也可以传参

        computed:{
            showALL(){
                 return function(value) {
                     let allNum = value.caseFeedbackAmount+
                              value.caseAcceptAmount+
                              value.caseFeedbackAmountRatio+
                              value.caseAcceptAmountOntime+
                              value.caseFeedbackAmountOntime+
                              value.caseAcceptAmountDelayed+
                              value.commentSponsorSynergismPoliceAmount+
                              value.commentDistributeOrgAmount+
                              value.commentAcceptBusinessSynergismOrgAmount;
                      return allNum;
                    }

                
            }
        }

10 这个重置vue中data的数据，不必一个个地从新写一遍,重置data中的某个对象，在后面点一点就可以了

Object.assign(this.$data, this.$options.data())/*重置vue中的data*/

11 最好的考证身份证要领

export const testCode=(idCard)=>{/*加权因子考证身份证*/
    let regIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
            //假如经由过程该考证，申明身份证花样准确，但准确性还需盘算
            if(regIdCard.test(idCard)){
                  if(idCard.length==18){
                    var idCardWi=new Array( 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ); //将前17位加权因子保留在数组里
                    var idCardY=new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ); //这是除以11后，可以发生的11位余数、考证码，也保留成数组
                    var idCardWiSum=0; //用来保留前17位各自乖以加权因子后的总和
                    for(var i=0;i<17;i++){
                        idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
                    }
                    var idCardMod=idCardWiSum%11;//盘算出校验码地点数组的位置
                    var idCardLast=idCard.substring(17);//获得末了一名身份证号码
                    //假如即是2，则申明校验码是10，身份证号码末了一名应该是X
                    if(idCardMod==2){
                        if(idCardLast=="X"||idCardLast=="x"){
                            return true;
                        }else{
                            return false;
                        }
                    }else{
                        //用盘算出的考证码与末了一名身份证号码婚配，假如一致，申明经由过程，否则是无效的身份证号码
                        if(idCardLast==idCardY[idCardMod]){
                             return true;
                        }else{
                                return false;
                        }
                    }
                }
            }else{
                return false;

            }
}

12 axios中，开辟环境就用测试的ip，临盆环境就用上线的ip

const baseURL = process.env.NODE_ENV === 'development' ? 'http://g.com' : '';

13 axios转化成为formdata

  return axios({
    method : 'post',
        url : developUrl+developDK+'synergetic/get/taskInfo?access_token='+TOKEN,
        headers : {
         'Content-Type': 'application/x-www-form-urlencoded'
        },
        data:params,
        transformRequest: [function (data) {/*转成fromdata*/
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret
        }],
  })

===============================================
14 新手平常会采纳全局装置vue脚手架的体式格局，以到达直接在敕令行顶用vue init 建立vue脚手架。那末有无当地装置vue-cli，然则依旧可以初始化项目呢？固然可以。

进入node_modules/.bin/

目次中，我们看到有以vue定名的文件，这现实上是一个软衔接，指向vue-cli，接下来建立初始化脚手架：

node_modules/.bin/vue init

因为我们是在node_modules中，所以初始化时，把目次补全，体系就不会运用vue的环境变量。那末这就到了用当地的脚手架搭建环境，防止影响体系环境的设置。剩下的就和全局装置脚手架没什么区别了，祝你好运。

本文来自 行者朝阳 的CSDN 博客 ，全文地点请点击：https://blog.csdn.net/y491887…

15 关于css引入的背景，在打包以后不显现的题目，实在就是途径的题目

=====================================================================================

重置vue中data数据，常合营与watch运用

Object.assign(this.$data, this.$options.data())/*重置data数据*/

===========================================================================

<el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>

16 还能如许子的？？？
我擦，直接轮回4次，之前一向没有发明这个要领啊，牛逼呀

=========================================================================

   watch:{
            treeSeach:{/*深度检测这个对象的变化*/
                 handler(newVal, oldVal){
                     this.yewuType=this.treeSeach.business_type;
                    this.infoType=this.treeSeach.info_type;
                    this.resocureRadio = this.treeSeach.segment;
                },
                deep:true
            }
        }

=============================================

17 watch 属性 检测对象或许数组的时刻，要深度检测

    watch:{
            option:{/*深度检测这个对象的变化*/
                 handler(newVal, oldVal){
//                   alert("dwa");
                    this.$nextTick(() => {
                        var dataSourcePie = echarts.init(document.getElementById(this.idName));
                        dataSourcePie.setOption(newVal);
                        window.addEventListener('resize', function () {
                            dataSourcePie.resize();
                        });
                    });
                },
                deep:true
            }
    }

=====================================================================================

18 props传参数时，应该以工场函数的情势去传

hasDataYwInfoDesc:{
                type:Object,
                default: function () {
                        return {}
                  }
            },

=====================================================
19 让element-ui的dialog每次显现的时刻做一次初始化

<el-dialog
  title="提醒"
  :visible.sync="dialogVisible"

在dialog上面增加v-if=’dialogVisible’

  <el-dialog
  title="提醒"
  :visible.sync="dialogVisible"
  v-if='dialogVisible'

===============================================

20 关于vue中对象的赋值，以及emit时的传值
当组件间通报对象时，因为此对象的援用范例指向的都是一个地点（除了基础范例跟null,对象之间的赋值，只是将地点指向统一个，而不是真正意义上的拷贝），以下
现实在vue中
this.A = this.B,
没有举行深层赋值，只是把this.A的地点指向了与this.B雷同的地点，一切关于A的修正会影响到B。

处理相互影响的思绪是在this.A必需是新建的一个对象，如许才保证不被指向统一地点，属性修正不会相互影响。

处理体式格局:

this.A=JSON.parse(JSON.stringify(this.B));

将对象转成字符串剔除对象属性后,再转换成对象赋值，如许能处理指向雷同地点修正会相互影响的题目。

同理，emit传一个对象到父组件时，父组件对这个对象做出修正也会影响到子组件，因为要先对象转成json字符串，再由json字符串转成对象

21 vue单页面应用翻开新的页面，相似于之前在新的页面翻开链接

const {href} = this.$router.resolve({
        name: 'foo',
        query: {
          bar
        }
      })
window.open(href, '_blank')

或许
如许写就好了
<router-link target="_blank"></router-link>

或许
let routeData = this.$router.resolve({ path: val });
window.open(routeData.href, '_blank');

22
<!–关于vue的跨域接见–>
https://blog.csdn.net/it_cgq/…
，这篇文章写得真的好

有几种要领可以处理跨域的题目。
1、背景许可跨域
2、本身设置代办跨域，设置代办就比较麻烦了，
因为要改config的东西，当打包出来后，另有东西须要改，
不仅要改config的，还要改谁人vue-cli的package.json
因为默许是没有设置–open的，所以要设置open

"scripts": {
    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js"
  },

23

因为vue的假造dom设置，所以一开始去举行dom操纵是没反应的

        mounted(){
             this.$nextTick(()=>{/*行的DOM操纵一定要放在要领里*/
                 console.log('dwadw');
                 this.watermarka();
             })
        },