新建完項(xiàng)目范删，先做好準(zhǔn)備工作

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路由懶加載根蟹，當(dāng)組件太多的時(shí)候脓杉，
vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載简逮，運(yùn)用webpack打包后的文件將會(huì)異常的大球散，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多买决，時(shí)間過長沛婴，會(huì)出啊先長時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)督赤，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分嘁灯，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力躲舌，減少首頁加載用時(shí)
簡單的說就是：進(jìn)入首頁不用一次加載過多資源造成用時(shí)過長３笮觥！没卸！

其實(shí)懶加載十分簡單,幾個(gè)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;
使用的時(shí)候，直接
this.$axios

3约计、main.js的設(shè)置

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/*生產(chǎn)提示*/
Vue.prototype.$axios = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
<!--使用的router诀拭，vuex要在底下申明，引入的外部插件要用vue.use去使用-->

4煤蚌、app.vue一般都不用動(dòng)耕挨，用作來做路由跳轉(zhuǎn)

<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只對當(dāng)前組件生效的css代碼-->

5 正常的一個(gè)組件

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 : "漢陽區(qū)分局秦川街派出所下陳家湖170號",
                        codeNunber :"4400652199852521223",
                        img :"" ,           
                        shedu : false,
                        weifa  :true,
                        zaitao : true,
                        origin : "上海市局科技處提供數(shù)據(jù)",
                        date   : "2018-7-16 12:23" ,
                    },
                    {
                        name:"張三",
                        sex :"男",
                        mingzu :"漢",
                        birthday :{
                            year:2017,
                            month:7,
                            day:21
                        },
                        adress : "漢陽區(qū)分局秦川街派出所下陳家湖170號",
                        codeNunber :"4400652199852521223",
                        shedu : true,
                        weifa  :false,
                        zaitao : false,
                        origin : "上海市局科技處提供數(shù)據(jù)",
                        date   : "2018-7-16 12:23" ,
                    },
                ],
                diy_router:"上海鐵路公安",
//              codeId :"",
            }
        },
        computed:{
            codeId(){
                if(this.$route.params.codeId==undefined){/*返回退后會(huì)變成undefined*/
                    return '上海鐵路公安';
                }
                return this.$route.params.codeId;
            }
        },
        activated(){/*當(dāng)前頁面有水印*/
            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中數(shù)據(jù)的定義尉桩，-->
    <!--計(jì)算屬性的使用筒占，-->
    <!--acitvated 是當(dāng)前這個(gè)組件處于激活時(shí)候用的，比mounted蜘犁，created好是因?yàn)檫@個(gè)屬性翰苫，是因?yàn)閷懺诶锩娴姆椒ㄊ强梢远啻芜\(yùn)行的-->
    

6 一個(gè)簡單的組件構(gòu)成

<template>
    <section>
        <form action="" onsubmit="return false;"><!--手機(jī)測試的話，改事件这橙，調(diào)用搜索-->
          <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();/*關(guān)閉搜索框*/
                }
        },
        watch:{/*監(jiān)視值的變化,前后跳頁時(shí)候使用*/
            searchValog(val){
                this.searchVal = val;
            }
        },
        mounted(){
            this.searchVal = this.searchValog;
        }
        
    }
</script>

<!--一般奏窑，一個(gè)組件用一個(gè)section包住，綁定屬性用:,綁定事件用@,-->
<!--傳進(jìn)來的參數(shù) 用props接受析恋，可以數(shù)組或者對象的形式去寫良哲，對象里面也有對象-->
<!--也是可以的。-->

<!--this.$emit('search_val',value);-->
<!--這個(gè)是發(fā)射事前助隧，在父親組件綁定這個(gè)事件筑凫，這個(gè)事件就可以發(fā)生了滑沧。-->

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

7 一般我們做移動(dòng)端項(xiàng)目，需要用手機(jī)才能真正測試出東西巍实，那么正在開發(fā)的本地環(huán)境中的vue項(xiàng)目滓技，怎樣才能讓
手機(jī)訪問呢？

首先棚潦，手機(jī)和電腦處于同一個(gè)網(wǎng)絡(luò)
電腦 調(diào)出cmd命令窗口令漂，查找自己的ip地址 ：ipconfig
ipv4 就是自己本機(jī)的ip地址了。例如 192.168.1.126

然后再vue項(xiàng)目中 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地址叠必，這時(shí)候，該項(xiàng)目中的地址就變成是這個(gè)地址了妹窖，再用手機(jī)打開這個(gè)地址就行了

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

8 vue的項(xiàng)目和php的項(xiàng)目纬朝，域名是絕對不沖突的，意思就是骄呼，當(dāng)使用vue的項(xiàng)目的時(shí)候共苛，可以開php，或者使用easymock蜓萄，yapi去模擬接口的隅茎，這個(gè)是沒有問題的

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

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 這個(gè)重置vue中data的數(shù)據(jù)嫉沽，不用一個(gè)個(gè)地重新寫一遍,重置data中的某個(gè)對象辟犀，在后面點(diǎn)一點(diǎn)就可以了

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

11 最好的驗(yàn)證身份證方法

export const testCode=(idCard)=>{/*加權(quán)因子驗(yàn)證身份證*/
    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])$)$/;
            //如果通過該驗(yàn)證，說明身份證格式正確绸硕，但準(zhǔn)確性還需計(jì)算
            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位加權(quán)因子保存在數(shù)組里
                    var idCardY=new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ); //這是除以11后踪蹬，可能產(chǎn)生的11位余數(shù)、驗(yàn)證碼臣咖，也保存成數(shù)組
                    var idCardWiSum=0; //用來保存前17位各自乖以加權(quán)因子后的總和
                    for(var i=0;i<17;i++){
                        idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
                    }
                    var idCardMod=idCardWiSum%11;//計(jì)算出校驗(yàn)碼所在數(shù)組的位置
                    var idCardLast=idCard.substring(17);//得到最后一位身份證號碼
                    //如果等于2，則說明校驗(yàn)碼是10漱牵，身份證號碼最后一位應(yīng)該是X
                    if(idCardMod==2){
                        if(idCardLast=="X"||idCardLast=="x"){
                            return true;
                        }else{
                            return false;
                        }
                    }else{
                        //用計(jì)算出的驗(yàn)證碼與最后一位身份證號碼匹配夺蛇，如果一致，說明通過酣胀，否則是無效的身份證號碼
                        if(idCardLast==idCardY[idCardMod]){
                             return true;
                        }else{
                                return false;
                        }
                    }
                }
            }else{
                return false;

            }
}

12 axios中刁赦，開發(fā)環(huán)境就用測試的ip，生產(chǎn)環(huán)境就用上線的ip

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

13 axios轉(zhuǎn)化成為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) {/*轉(zhuǎn)成fromdata*/
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret
        }],
  })

===============================================
14 新手一般會(huì)采用全局安裝vue腳手架的方式闻镶，以達(dá)到直接在命令行中用vue init 創(chuàng)建vue腳手架甚脉。那么有沒有本地安裝vue-cli，但是依然可以初始化項(xiàng)目呢铆农？當(dāng)然可以牺氨。

進(jìn)入node_modules/.bin/

目錄中，我們看到有以vue命名的文件，這其實(shí)是一個(gè)軟連接猴凹，指向vue-cli夷狰，接下來創(chuàng)建初始化腳手架：

node_modules/.bin/vue init

因?yàn)槲覀兪窃趎ode_modules中，所以初始化時(shí)郊霎，把目錄補(bǔ)全沼头，系統(tǒng)就不會(huì)使用vue的環(huán)境變量。那么這就到了用本地的腳手架搭建環(huán)境书劝，避免影響系統(tǒng)環(huán)境的配置进倍。剩下的就和全局安裝腳手架沒什么區(qū)別了，祝你好運(yùn)购对。

本文來自 行者向陽 的CSDN 博客 猾昆，全文地址請點(diǎn)擊：https://blog.csdn.net/y491887095/article/details/73061021?utm_source=copy

15 關(guān)于css引入的背景，在打包之后不顯示的問題洞斯，其實(shí)就是路徑的問題

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

重置vue中data數(shù)據(jù)毡庆，常配合與watch使用

Object.assign(this.$data, this.$options.data())/*重置data數(shù)據(jù)*/

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

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

16 還能這樣子的？烙如？么抗？
我擦招拙，直接循環(huán)4次泪喊，之前一直沒有發(fā)現(xiàn)這個(gè)方法啊，牛逼呀

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

   watch:{
            treeSeach:{/*深度檢測這個(gè)對象的變化*/
                 handler(newVal, oldVal){
                    this.yewuType=this.treeSeach.business_type;
                    this.infoType=this.treeSeach.info_type;
                    this.resocureRadio = this.treeSeach.segment;
                },
                deep:true
            }
        }

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

17 watch 屬性 檢測對象或者數(shù)組的時(shí)候直焙，要深度檢測

    watch:{
            option:{/*深度檢測這個(gè)對象的變化*/
                 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傳參數(shù)時(shí)徘溢，應(yīng)該以工廠函數(shù)的形式去傳

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

=====================================================
19 讓element-ui的dialog每次顯示的時(shí)候做一次初始化

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

在dialog上面添加v-if='dialogVisible'

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

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

20 關(guān)于vue中對象的賦值吞琐，以及emit時(shí)的傳值
當(dāng)組件間傳遞對象時(shí)，由于此對象的引用類型指向的都是一個(gè)地址（除了基本類型跟null,對象之間的賦值然爆，只是將地址指向同一個(gè)站粟，而不是真正意義上的拷貝），如下
實(shí)際在vue中
this.A = this.B,
沒有進(jìn)行深層賦值曾雕，只是把this.A的地址指向了與this.B相同的地址奴烙，所有對于A的修改會(huì)影響到B。

解決相互影響的思路是在this.A必須是新建的一個(gè)對象剖张，這樣才能保證不被指向同一地址切诀，屬性修改不會(huì)相互影響。

解決方式:

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

將對象轉(zhuǎn)成字符串剔除對象屬性后,再轉(zhuǎn)換成對象賦值搔弄，這樣能解決指向相同地址修改會(huì)相互影響的問題幅虑。

同理，emit傳一個(gè)對象到父組件時(shí)顾犹，父組件對這個(gè)對象做出修改也會(huì)影響到子組件倒庵，因?yàn)橐葘ο筠D(zhuǎn)成json字符串褒墨，再由json字符串轉(zhuǎn)成對象

21 vue單頁面應(yīng)用打開新的頁面，類似于以前在新的頁面打開鏈接

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

https://blog.csdn.net/it_cgq/article/details/78781422
哄芜，這篇文章寫得真的好

有幾種方法能夠解決跨域的問題貌亭。
1、后臺允許跨域
2认臊、自己設(shè)置代理跨域圃庭，設(shè)置代理就比較麻煩了，
因?yàn)橐腸onfig的東西失晴，當(dāng)打包出來后剧腻，還有東西需要改，
不僅要改config的涂屁，還要改那個(gè)vue-cli的package.json
因?yàn)槟J(rèn)是沒有設(shè)置--open的书在，所以要設(shè)置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設(shè)置，所以一開始去進(jìn)行dom操作是沒反應(yīng)的

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