vue 随记_vue跳过谷歌安全下载信任http

//VUE
终止vue的跑动是ctrl+c

拿到新项目的时候先翻目录，看清楚页面结构之后，首先去看登录和路由

登录页面一般会有登录封装的逻辑，例如token的存储，读取等。全局搜索方法，一般登录会有一个封装方法，api请求会有一个方法。

登录的时候检查登录成功，登录失败的状态，以及一登录就checklogin的方法。

#vue中this.$emit的用法

vue中this.$emit的用法 - 柯南。道尔 - 博客园

this.$emit('事件',参数)  子组件需要调用父组件的方法的场景下使用。

//uniapp打包小程序，用的vue跑的​​​​​​​

// 步骤1
创建新项目 vue creat 项目名称（不能是中文）
路由 npm install vue-router  --save
VUEX: npm install vuex  --save
axios: npm install axios --save
手机端安装swiper要4.5以上的版本 npm install swiper@5.4 --save
安装element ui 安装之前要先启动vue （https://element.eleme.io/#/zh-CN）
输入npm i element-ui -S
安装依赖 cnpm i element-ui --save
在main.js之中引入css和element ui
 
使用vant框架 （https://vant-contrib.gitee.io/vant/v3/#/zh-CN）
npm i vant -S
 
安装依赖
npm i babel-plugin-import -D
 
在.babelrc 或 babel.config.js 中添加配置：
 
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}
 
import axios from 'axios'
 
Vue.prototype.axios = axios;
axios.defaults.baseURL = "地址"

//vue实现吸顶效果 具体实现代码如下：

 mounted() {
    window.addEventListener("scroll", this.hidemenu); //监听滚动事件
  },
在methods中：
 
 hidemenu() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //当滚动超过50时，实现吸顶效果（导航高度为50）
      if (scrollTop > 49) {
        this.navBarFixed = true
      }else{
        this.navBarFixed = false
      }
    },
在对应的标签中加入修改后的样式：
 
 <div class="header"  :class="navBarFixed == true ? 'navBarWrap' :''">
     
    </div>
  .navBarWrap {
    position: fixed;
    top: 0;
    z-index: 999;
    width:100%;
  }
 
//跳转页面（链接）
 
<el-footer>
          <router-link to="/index"><i class="el-icon-s-home"></i>首页</router-link>
          <router-link to="/about"><i class="el-icon-s-order"></i>公司简介</router-link>
          <router-link to="/contact"><i class="el-icon-phone"></i>联系我们</router-link>
        </el-footer>
 
//点击返回上一级页面
<div class="11" @click="goOff(index)"></div>
 
methods:{
goOff(index){
    this.$router.go/back(-1);
    }
}

// 一般用于发送ajax请求用，这里的.id(也可以.name)就是router里面的name（id）,当我们刷新运行页面，再点击about或者news就可以显示出他是哪个name（id）（详情页获取id）
 

data(){
 return {
    id:this.$router.params.id
    }
}
Vue2.0X配置环境--nginx反向代理（用于寻找位置）
设置名字：phone.conf
server {
        listen        80;
        server_name  www.phone.com;
 
       location / {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_http_version 1.1;
            proxy_set_header Connection "keep-alive";
            proxy_pass http://localhost:8080;
 
        }
       location /page/ {
            proxy_set_header X-Real-IP $remote_addr;
            #proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_http_version 1.1;
            proxy_set_header Connection "keep-alive";
            proxy_pass http://page.3adiaoding.com/page/;
 
        }
}
 
在webpack.dev.conf.js
devServer:{
disableHostCheck: true,
}
编辑器内部反定向代理编辑：（可百度）（解决跨域的问题，小程序不存在这个问题）
在config之中寻找index.js,更改dev底下：
proxyTable: {
         '/page': {                      //需要代理的接口
           target:'http://page.3adiaoding.com/page', //目标服务器
           changeOrigin:true,　　　　　　//是否跨域
           pathRewrite: {
             '^/page':''             //重定向
           }
         }
       },
 
如果没有config文件夹就自己创建一个vue。config。js，去vue-cli找反定向文档
 
module.exports = {
  devServer: {
    proxy: {
      '/page': {
        target: 'http://page.3adiaoding.com/page/',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    },
    disableHostCheck: true
  }
}
找不到图片的时候过滤：
main.js:
Vue.filter('imgfilter',function(data){
  return 'http://manger.3adiaoding.com/api/uploads/'(地址) + data
})

配置路由：
 
{
    path: '',
    redirect: '/index',//为空时重定项，返回首页
 }

//后台管理系统笔记

//VUEX的store用法
// vuex比较适合管理统一管理的，如登录token,用户信息，或者是一些全局个人偏好设置等
https://blog.csdn.net/CRMEB/article/details/121968580

//vuex中 this.$store.dispatch() 与 this.$store.commit()二者的区别

vuex中 this.$store.dispatch() 与 this.$store.commit()二者的区别_蜗牛杨哥的博客-CSDN博客_$store.dispatchthis.$store.dispatch()与this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变statethis.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)......https://blog.csdn.net/u014635374/article/details/116158515

//报错为 error in ./node_modules/screenfull/index.js

【问题】screenfull@6在vue工程中报错_screenfull vue 出错 index.js_小沈曰的博客-CSDN博客

//vue3+vite随记

安装npm，报错，显示

npm ERR! code CERT_HAS_EXPIRED：解决证书过期问题

最后把淘宝镜像变成http好了 = = ，我也是醉了。 附上链接

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED-CSDN博客