新建完项目,先做好准备工作
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();
})
},