本文共 12255 字,大约阅读时间需要 40 分钟。
新建完项目,先做好准备工作
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: ''})
4、app.vue一般都不用动,用作来做路由跳转
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)); } } }
6 一个简单的组件构成
======================================================
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的环境变量。那么这就到了用本地的脚手架搭建环境,避免影响系统环境的配置。剩下的就和全局安装脚手架没什么区别了,祝你好运。
15 关于css引入的背景,在打包之后不显示的问题,其实就是路径的问题
=====================================================================================
重置vue中data数据,常配合与watch使用
Object.assign(this.$data, this.$options.data())/*重置data数据*/
===========================================================================
{ { item }}
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每次显示的时候做一次初始化
在dialog上面添加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')或者这样写就好了或者let routeData = this.$router.resolve({ path: val });window.open(routeData.href, '_blank');
22
,这篇文章写得真的好有几种方法能够解决跨域的问题。
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(); }) },
24、属性赋值不生效问题
Vue.set('title', obj, 'Hello')
25、我们在map里的this是指向当前map的迭代对象,而非我们vue的实例,所以this里没有我们需要的xxx。
解决方式有两种,其一是通过保存this
methods: { iter () { this.list.map(function (v1, k1) { if (k1 === this.name) { this.item = v1 console.log(this.item) } }) } },
let _this = this
或者使用以下方式:
methods: { iter () { this.list.map((v1, k1) => { if (k1 === this.idx) { this.item = v1 console.log(this.item) } }) } },
转自:
转载地址:http://pcyws.baihongyu.com/