Vue_cli 使用

Vue_cli 使用

• 安装

//全局安装
npm install vue-cli@2.9.6 -g
//安装完成测试,出现版本
vue -V 
//选择模板
vue list 
//初始化模板目录
vue init webpack xxxx
//选择模块
eslint 装语法检查 
router 装
test //测试单元 no
e2e  //测试单元 no
看到等号  ctrl+c 退出
cnpm i //根据package.json安装模块

npm run dev   //启动项目 开发环境(线下开发) 
npm run build //打包项目 生产环境(线上发布) 静态目录 dist

• 目录介绍

除了src目录修改不需要重启,其他目录修改都需要重启服务

• 路由配置(重点)

1. 创建组件, 引入 .在设置 router

2. 路由统一:

   1. name 跟 path 值要书写一致

3. 加子路由 :

   1. 创建模块
   2. 引入模块
   3. 考虑显示位置
   4. 子路由不需要加 /,加/会导致跳转失败

• 设置异步加载路由

 component:resolve=>require(['@/components/HelloWorld'],resolve)

• 配置测试实例

const router=new Router({
  routes: [
    {
      path: '/',
      name: '/',
      component:resolve=>require(['@/components/home'],resolve),
      redirect:"info",
      children:[
      		{
				path: 'info',
				name: 'info',
				component:resolve=>require(['@/components/main/info'],resolve),
      		},
      		{
				path: 'news',
				name: 'news',
				component:resolve=>require(['@/components/main/news'],resolve),
				children:[
					{
						path: 'childCom',
						name: 'childCom',													component:resolve=>require(['@/components/child/childCom'],resolve)
					}
				]
      		},
      		{
				path: 'test',
				name: 'test',
				component:resolve=>require(['@/components/main/test'],resolve),
      		},
      ]
    }
  ]
})

export default router;

路由全局钩子函数

1. 在路由实例下面调用,全局路由钩子函数,组件每一次跳转,都会触发

• 案例

// url >http://localhost:8080/?pram=u#/info
// 实现不同页面跳转项目不同位置

// 打印方法  console.dir(router)
router.beforeEach((to,from,next)=>{
	// console.log(location);  获取url参数
		//to 即将进入路由
		//from 即将离开路由
		//next 跳转下一个  跳转哪一个路由
    	// next({path:"/test"});  //跳转指定路由
    	
		// console.log(to,from,next);
		if(to.path=="/"){
			if(location.search.indexOf("u")!=-1){
				next({path:"/test"});
			}else if(location.search.indexOf("s")!=-1){
				next({path:"/news"});
			}else{
					next();
			}
		}else{
			next();
		}
})

//全局路由钩子二 跳转之后钩子执行函数
router.afterEach((to,from)=>{
		console.log("跳转之后");
})

• 局部路由钩子函数

 // 局部路由根methods是一个级别,option配置固定写法
 // 路由进入组件触发
//路由先进来,在渲染生命周期函数

  beforeRouteEnter(to,from,next){
    console.log("组件路由进入触发");
    // console.log(this);
    // 路由进入 实例为创建
    // next({path:"/info"});
    // console.log(to,from);
      
     // 实现路由返回跳转 from 获取路由从哪来
      //A>B>C
    // if(from.path=="/test"){
    //   // 如果他的上一级路由是  test,直接回info
    //   next({path:"/info"})

    // }else{
    //   next()
    // }
    next();
  },
  // 子路由进入触发
  beforeRouteUpdate(to,from,next){
    console.log("子路由进入触发");
    next();
  },
   // 组件路由离开触发
  beforeRouteLeave(to,from,next){
    console.log("组件路由离开触发");
    next();
  }

• 路由传参

//视图跳转

//使用 name>params 刷新参数消失,地址栏不显示
//使用path>query    刷新参数还在,地址栏显示
<router-link :to="{name:'news',params:{id:'33'}}">前往>name>news1</router-link>
      <!-- 使用path跳转携带参数 -->
<router-link :to="{path:'/news',query:{id:'33'}}">前往>query>news2</router-link>

//函数跳转
this.$router.push({
    path:"/news",
    query:{
        id:"33"
    }
})
this.$router.push({
    name:"news",
    params:{
        id:"33"
    }
})
//路由参数
1. 创建组件 
2.配置路由 
	//注意一定要加斜杆
	 {
        path: 'msea/:id',
        name: 'msea',
        component: resolve => require(['@/components/main/msea'], resolve),
      }
3.跳转
this.$router.push({
  	path:"/msea/"+89,
})
         
//获取路由参数  
 console.log(this.$route.query)
 console.log(this.$route.params)

• Vue.use

//作用全局注入
//如果use方法传入一个函数,在执行这个函数的时候,传入一个Vue实例
//创建一个js文件,向外暴露一个函数 fn(Vue)
//在main里面引入js
//使用Vue.use方法传入这个函数
//我们就可以在函数里面,use调用函数,并且传入一个全局的Vue实例

//core.config.js
export default (Vue)=>{
    consoel.log(Vue)
}
//main.js
import core from "@/core/core.config"
Vue.use(core)

-------------------------------------------------------------
//案例  core.config.js 开花结果
    //全局组件
import tempFn from "@/components/tempCommon/tempCommon"
import fliter from "@/core/fliter/index"
import global from "@/core/global/global"//返回了以个对象{getParam:fn()}
import apis from "@/core/api/index" //返回了以个对象{joke:fn(),getServerStr:fn()}

export default (Vue)=>{
	// 全局组件
	tempFn(Vue)
    // 全局过滤器
	fliter(Vue)
	// 绑定到Vue原型里面直接可以在当前实例 this.$global上面调用
    //将方法写入Vue实例,实现每一个组件,都可以通过this.$global,this.$apis 来调用方法
    //$global,$apsi 不是固定写法
	Vue.prototype.$global=global;
	Vue.prototype.$apis=apis;
}

• 定义全局组件

//tempCommon.js
//
export default (Vue)=>{//去到Vue实例}
    可以在Vue实例上面去定义
    1.全局组件
    2.全局过滤器
    例子:
    //第二参数,可以是一个组件.vue后缀的文件
    import lay_btn from "@/components/main/appCom"
    Vue.component("lay_test",lay_btn)

• 配置代理

1.目录:config>index>proxyTable
const URL ="https://bird.ioliu.cn";
const URL ="http://10.41.153.189:80";  //对外IP
const URL ="https://github.com/xCss/JsonBird/wiki";  //对外IP
const URL ="https://bird.ioliu.cn";  //对外IP

ajax>url:"/joke"

proxyTable:{
      '/apis': { //url里面要拼接进去
        target:URL , // 需要代理接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/apis': '' //需要rewrite的,
        }
      }
}
需要要重启

2.目录:http.js
//修改baseUrl   > /apis
const baseURL=location.host.indexOf("xxx")!=-1?"":"/apis";
//具体根据公司主机进行配置 host

//axios的配置根据实际情况写
//https://www.kancloud.cn/yunye/axios/234845
let ajaxConfig={
		baseURL,
		timeout: 20000,
		transformRequest: [function (data) {
            console.log(data);
		// 对 data 进行任意转换处理
		return data;
		}],
		// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
		transformResponse: [function (data) {
		// 对 data 进行任意转换处理
		return data;
		}],
		withCredentials: true,
		responseType: 'json'

}

var instance = axios.create(ajaxConfig)

export default instance;


//当法请求的时候

import request from "./http"


class Apls{

	joke(data){
		return request({
			method:"get",
			url:"/joke",
			params:{
				uname:"Msea",
				upwd:"1234565"
			}
		})
	}
	getServerStr(){
		return request({
			method:"post",
			url:"/json.php",
			data:{
				uname:"Msea",
				upwd:"1234565"
			}

		})
	}

}


export default new Apls();


//代理的转换
url:用的baseUrl,所以美衣次请求都会带上  /apis 例如 /apis/joke

当请求发出去  
浏览器会自动 前面拼上你的主机 比如 本地开发环境

host                        path
http://localhost:8080      /apis/joke

代理拦截  http://localhost:8080      /apis/joke
会自动把url替换>   (http://localhost:8080/apis >  "https://bird.ioliu.cn"  )/joke
最终 :https://bird.ioliu.cn/joke          

测试接口

//  接口文档 https://github.com/xCss/JsonBird/wiki
// 1.拿到接口    https://bird.ioliu.cn/joke?type=pic&page=1&pagesize=10
// 2.拆分接口  host:> https://bird.ioliu.cn   path:> "/joke"   params:{type: 'pic',page:'1',pagesize:'10'}

// 3.配置代理  config>index
const URL="https://bird.ioliu.cn"
proxyTable:{
      '/apis': { //url里面要拼接进去
        target:URL , // 需要代理接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/apis': '' //需要rewrite的,
        }
      }
}
//配置完代理请重启项目

//4.检查 http模块 >baseUrl ,主要检查 代理配置 /apis  baseUrl里面 /apis 两个要一直
const baseURL=location.host.indexOf("xxx")!=-1?"":"/apis";

//5.搭建接口 core/api/index.js
import request from "./http"


class Apls{
	joke(data){
		return request({
			method:"get",
			url:"/joke",
			params:data
		})
	}
}
export default new Apls();
备注:我已经将apis在core.config.js注册到全局实例,在组件内部 this.$apis.joke()

//6.在组件内容进行调用

info.vue

mounted(){
    console.log(this.$apis.joke()) //promis
    var data={
                type: 'pic',
                page:'1',
                pagesize:'10'
            };
    this.$apis.joke(data).then((res)=>{
        console.log(res)
    })
}

配置css样式表部分

//1.下载scss依赖模块   cnpm install node-sass sass-loader --save-dev //重启
		//<style lang="scss">
//2.在组件内部进行scss测试,
//3.配置scss 函数全局调用配置
	//3.1下载依赖模块  cnpm i sass-resources-loader -D
	//3.2修改webpack配置 build>utils.js
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    修改以下部分,从concat开始 --------------------------------------
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
            //引入全局sass函数文件
          resources: path.resolve(__dirname, '../src/common/css/index.scss')
        }
      }
    ),
    修改以下部分 --------------------------------------
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
	

• 引入淘宝响应式框架

cnpm i lib-flexible -S
//在main里面引入  
import 'lib-flexible/flexible.js'
//成功 html上设置上了 font-size

• Vuex 使用

Vuex主要作用,全局通信
1.在 core >store文件夹 >建立index.js 开始配置
2.引入Vue,因为要使用 Vue.use    import Vue from "vue";
3.引入vuex  要记得下载模块  cnpm i vuex -D   import Vuex from "vuex";
Vue.use(Vuex);

4.配置四个值

//定义属性
//this.$store.state
const state={
	name:"苹果",
	num:0,
	price:16
}
//定义同步方法
//this.$store.commit("add",{xxxx})
const mutations={
	add(state,data){
        //state获取state里面的属性值,默认第一个就是
        //data 获取视图传入的数据
		state.num++;		
	}
}
//定义 computed(属性计算)
//this.$stroe.getters.count //当做变量取用
const getters={
	count(state){
		return state.num*state.price;
	}
}

//定义异步方法,可以在这个里面做一些异步操作,比如调用通用数据接口
//this.$store.dispatch("syFn",{xxxx})
const actions={
	syFn(context){
		// context.state  可以取 state 属性
		// context.commit  可以调用 mutations 同步方法 属性
		// context.dispatch可以调用 actions 异步方法 属性
	},
	test(context,data){
		console.log(data)
	}	
}

export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})
在mian.js里面引入  
//引入vuex数据仓库
import store from "@/core/store/index"
//写入 Vue实例 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

总结 : 
视图使用,不需要再组件内定义,{{$store.getters.count}}  {{$store.state.num}}
函数内使用 this.$store
		调属性值  this.$store.state
		调用方法 
        		同步 mutations 
                this.$store.commit("xxx","传一个对象,传数据")
				异步 actions
                this.$store.dispatch("xxx","传一个对象,传数据")

• 作用,禁止组件接口渲染重复加载

//1.配置路由中转页面 home.vue
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
//2.配置路由
    {
    path: 'info',
    name: 'info',
    meta:{
        keepAlive:false  //true 禁止重复加载, false不禁止
        //可以取定义其他属性值,来进行区别
    }

• 全局事件通信

1.绑定
core.config.js//在Vue.prototype.绑定
Vue.prototype.$eventHub=new Vue();
2.使用

//我要在那通信,就在那个组件初始化进行事件注册,mounted
 this.$eventHub.$on("sub",(val)=>{
      console.log(val)//{name:"Msea"}
})

//我在那传值,就在那个组件 emit,通过事件调用
 methods:{
    test(){
      this.$eventHub.$emit("sub",{name:"Msea"})
    }
  }

• 安装mint-ui,配置按需引入(按照下面配置,不需要在main里面引入min-ui)

访问  mint-ui网站前面加 https://

$npm i mint-ui -S
$npm install babel-plugin-component -D
$npm install --save-dev babel-preset-es2015 -D
//mint-UI初始化需要下载以上三个模块
// 然后，将 .babelrc 修改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
      
     ["es2015", { "modules": false }]
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",  ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]  ]
}

axios连接器

import axios from "axios"

import { Indicator } from 'mint-ui';
// const URL ="https://bird.ioliu.com";
// "localhost:8899"
const baseURL=location.host.indexOf(".com")!=-1?"":"/apis";
// console.log(location.host)
// console.log(location.host.indexOf("8899"))
// console.log(baseURL);
// 区分 
// 本地环境
// 例如:
// localhost  127.0.0.1 xxx.xxx.xxx

//生产环境

// www.baidu.com

// url:baseURL+"/index"

let ajaxConfig={
		baseURL,
		timeout: 20000,
		transformRequest: [function (data) {
		// 对 data 进行任意转换处理
		return data;
		}],

		// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
		transformResponse: [function (data) {
		// 对 data 进行任意转换处理

		return data;
		}],
		withCredentials: true,
		responseType: 'json'

}

var instance = axios.create(ajaxConfig)

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log(config);
    // 通过header设置 cookie token
    Indicator.open();
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log(response);
    Indicator.close();
    return response;
  }, function (error) {
     Indicator.close();
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default instance;

mock_data

mock的作用,制作模拟数据,进行测试开发,而不用等待服务端人员写完接口

安装:
cnpm install mockjs -D
cnpm i axios-mock-adapter -D