vue一些三方框架的安装和使用

最近一直在学习前端的东西，然后项目开发用的vue，在做项目的过程中，大概知道了一些基本的常用的第三方，然后，抽时间整理一下，方便之后的复习。

1.用Terminal 终端来生成vue项目，在这之前要配置好vue的环境，不会的自行百度

1）生成项目

vue init webpack testticy     

2）进入项目和安装依赖

cd testity

npm install

3）启动项目

npm run dev

注意：如果 npm install 失败，用mac开发的要 开放文件的权限，并使用   sudo npm install  来安装脚手架  sudo 是输入管理员密码的意思

注意：补充一下，针对vue版本在3.0以上的，创建项目就更加简单了

第一步：vue create 项目名

第二步：选择模式 自动还是手动

根据需要自行选

二：

1.  vue-router 路由的安装

npm install --save vue-router

引入：

1.)在src 先新建文件夹router  在里面新建文件 index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2)在main.js里面引入

import router from './router'
new Vue里添加  router

2. axios   网络请求

安装

npm install axios —save

引入：

1）在main.js里面引入

//导入 axios 来处理网络请求（这不是vue本身的模块，这是官方推荐使用的第三方模块）
import axios from 'axios'
//使用--示例
//Vue.prototype.userName='小黑'
Vue.prototype.axios=axios;

3. vuex    各个组件要操作同一数据的时候适合使用vuex

安装

 sudo npm install vuex --save

引入：

1）Src下新建一个文件夹，例如 store  在里面新建 store.js

import Vue from 'vue'
import Vuex from 'vuex'
// 全局注册
Vue.use(Vuex)
//提出来 --然后要导进来
let state={//存放一些数据
}
let mutations={
 
}
let actions={

}
let getters={

}

//单例 state 存数据的  mutations：同步处理   actions：异步处理  Getters 可以认为是store的计算属性
const store=new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})
// 导出
export default store

2）在main.js下 引入

import store from './store/store'//路劲/名字

new vue 里添加 store

4.  mint-ui使用

安装：

npm install mint-ui  —save

引入：

import Mint from 'mint-ui'
import "mint-ui/lib/style.css"
Vue.use(Mint)

5. SCSS使用  参考（https://blog.csdn.net/zhouzuoluo/article/details/81010331）

安装：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

使用：

1）在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

2）使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

 

6.屏幕自适应 参考（https://blog.csdn.net/weixin_34019144/article/details/88145006）

安装

1、npm i amfe-flexible


2、import 'amfe-flexible'
3、npm i postcss-px2rem

引入

在package.json里添加

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 37.5
      }
    }
  }

7. json-server 的使用

安装--保存在dev路劲下 

sudo npm install json-server --save -dev

引入：

1）

第一步 

首先在  webpack.dev.conf.js    文件中的  const portfinder = require('portfinder')  大约12行的位置

添加如下代码：

//第一步
// 引入json-server（这个模块的作用是可以在前端自己创建一些结构（基于node.js））
const josnServer=require('json-server')
const apiServer=josnServer.create()
// 这个db.josn就是制作接口的json文件，默认放在项目根目录下
const apiRouter=josnServer.router('db.json')
const middlewares=josnServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
//因为我们还有一个webpack服务，端口号是我们自己配置的4000，这里也要配置一个端口号，是不能重复的
// http://localhost:4003/getProductList
apiServer.listen(4003,()=>{
  console.log('JSON Server is Running')

})

8.  Vue 懒加载  vue-lazyload    资料：https://github.com/hilongjw/vue-lazyload

安装

npm install vue-lazyload --save

引入

// 默认的图片
import logoSrc from './assets/logo.png'
// 导入懒加载模块
import VueLazyload from 'vue-lazyload'
//全局注册
Vue.use(VueLazyload,{
  error:logoSrc,//这个是请求失败后显示的图片
  loading:logoSrc,//这个是加载的loading的效果
  tyr:2 //这个是加载图片效果

})

9. vue-devtools  资料 https://github.com/vuejs/vue-devtools

安装：

1.下载到桌面

cd /Users/wuxiaolei/desktop   

git clone https://github.com/vuejs/vue-devtools.git 

2.进入目录   vue-devtools目录

3.执行    npm install

4执行    npm run build 

5.加载到chrome扩张页面

6.选中“开发人员模式”

7.单击“加载解包扩展”，然后选择Shell/Chrome。

 

 

资料系列：

1. 轮播图 Vue-swiper     或者   vue-awesome-swiper  资料 https://github.com/surmon-china/vue-awesome-swiper

2.移动端 mint ui    https://github.com/ElemeFE/mint-ui

3.PC端 element    http://element-cn.eleme.io/#/zh-CN/component/layout

封装系列

1.axios的封装

1）首先先导入 axios 框架    导入之后在src文件夹下新建 文件夹 utils （随意） 在下面新加 http.js 文件

// axios 拦截器
import  {getToken} from '@/utils/auth';
import axios from 'axios'
import store from '../../src/store'
import router from '../../src/router'

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'https://tushuguan.qs110.com/wxadmin/'
// http request 拦截器
axios.interceptors.request.use(
    config => {
      if (store.state.token) {
        config.headers.Authorization = getToken();
      }
      return config
    },
    err => {
      return Promise.reject(err)
    },
  )
  // http response 拦截器
  axios.interceptors.response.use(

    response => {
        console.log("--zhang1234--"+response.data.success)
        if (response.data.success!=undefined&& response.data.success == '10') {
               alert('', '登录超时', {
              confirmButtonText: '确定',
              callback: function (action) {
                //跳转登录界面
               // router.push({path:'/login'})
               // 只有在当前路由不是登录页面才跳转
              router.currentRoute.path !== 'login' &&
               router.replace({
               path: 'login',
               query: { redirect: router.currentRoute.path },
              })
  
              }
            });
            return;
          }

        
      return response
    },
    error => {
      //if (error.response) {
        //switch (error.response.status) {
        //   case 401:
        //     // 401 清除token信息并跳转到登录页面
        //     //store.commit(types.LOGOUT)
            
        //     // 只有在当前路由不是登录页面才跳转
        //     router.currentRoute.path !== 'login' &&
        //       router.replace({
        //         path: 'login',
        //         query: { redirect: router.currentRoute.path },
        //       })
        // }
      //}
      // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
      //return Promise.reject(error.response.data)
    },
  )
  export default axios

2)在main.js中引入 

import axios from './utils/http'
Vue.prototype.$axios=axios;

3）封装axios的网络请求方法   在新建的 utils文件下新建  axiosutils 文件   封装axios的post 和get请求方法

import  {getToken} from '@/utils/auth';
// _self上下文环境变量
//_url请求地址
//jsData  参数
//showError 是否显示错误信息
// 回调
//var baseurl="https://tushuguan.qs110.com/wxadmin/";
export function axiosutils(_self, _url, jsData, showError, callback){
  //url:baseurl+ _url,
    _self.$axios({
        method: 'post',
        url: _url,
        data:_self.$qs.stringify(jsData),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
           token:getToken()
        }
      }
    ).then(
      res => {
        if (callback == null){
         return;
        }

        
        callback(res);
       
      },
      err => {
  
          console.log("7777="+err);
        if (showError) {
          _self.$alert('', '数据获取失败', {
            confirmButtonText: '确定',
            callback: function (action) {
             
            }
          });

        }
      }
    );

    }

  
   //get请求
    export function axiosutilsget(_self, _url, jsData, showError, callback){
      
      _self.$axios({
          method: 'get',
          url: baseurl+_url,
          params:_self.$qs.stringify(jsData),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
             token:getToken()
          }
        }
      ).then(
        res => {
          if (callback == null){
           return;
          }
          callback(res);
        
        },
        err => {
  
          console.log("zhang="+err)
        }
      );
  
  
      }

 

4)在main.js中引入 

//axios的post请求
import {axiosutils} from './utils/axiosutils'
Vue.prototype.$axiosutile=axiosutils;
//axios的get请求
import {axiosutilsget} from './utils/axiosutils'
Vue.prototype.$axiosutilsget=axiosutilsget;

2.  token 的保存   使用   js-cookie

1）.在utils文件夹下新建  文件 auth.js  随意

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {//保存token
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

2）登录界面

//引入
import {
  getToken,
  setToken,
  removeToken
} from '@/utils/auth'


//保存
 setToken(data.token)

路由跳转系列

1）路由传参

{
 path:'/homedetails/:id',
 name:'HomeDetails',
 component:HomeDetails
}

传递参数：this.$router.push("/homedetails/" + cid);

接收参数：var tab = this.$route.params.id;

2)多参数传参

clickFn(hospital_id){
      this.$router.push({path:"/learndetails",query:{s1:hospital_id,s2:this.choseType}})

}

接收参数：

created(){
//打印一下获取的参数
let query=this.$route.query;
console.log(query);
}

模块之间的传值系列

1、https://www.jianshu.com/p/af9cb05bfbaf 

https://cn.vuejs.org/v2/guide/components-props.html

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息

对数组操作的常用方法

1）slice

    var classlistgroup = list.slice(开始位置,结束位置);   

2）split     对 var s=‘1,2,3,4,5,6’

        var s1 = data.msg.split(",");  //转换后变成一个数组

3）concat    给一个数组再拼接一个数组

    Var s=list.concat(list1);
  
4）JSON.stringify（）  将对象转成字符串

    JSON.parse(）将字符串转成对象

5）timer3


Var timer3= setTimeout: setTimeout(function () {
        //写逻辑方法
       }, time * 1000)

//清空

 clearTimeout(timer3);