常用的代码片段

vue2中新项目的下载插件指令

cnpm install vue-router@3 axios vuex@3 less@3 less-loader@5  vuex@3 --save

vue2的代码神器

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import引入的组件需要注入到对象中才能使用",
			"components: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//监听属性 类似于data概念",
			"computed: {},",
			"//监控data中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"//生命周期 - 创建完成（可以访问当前this实例）",
			"created() {",
			"",
			"},",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"//生命周期 - 挂载完成（可以访问DOM元素）",
			"mounted() {",
			"",
			"},",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
			"}",
			"</script>",
			"<style>",
			"$4",
			"</style>"
		],
		"description": "Log output to console"
	}
}

vue3的代码神器

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div class=\"\">\n",
			"  </div>",
			"</template>\n",
			"<script >",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"import {reactive,toRefs} from \"vue\"",
			"export default{",
			"//import引入的组件需要注入到对象中才能使用",
			"  components: {},",
			"  setup() {",
			"//这里存放数据",
			"   const data = reactive({\n",
			"   })",
			"   const data2 = toRefs(data)",
			"    return {",
			"      ...data2",
			"    }",
			"  }",
			"}",
			"</script>\n",
			"<style lang=\"less\" scoped>",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	}
}

移动端的base.css

src–styles–base.css
App.vue中引入

/*  移动端要转换单位为rem
    rem是相对于根元素的 html

    移动端的设计标准是按照iphone6的尺寸设计的
    iphone6的分辨率为750*1334，pc端查看是375*667

    设置样式的是要以375宽度为基准来设置

    @media
*/
* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: #f55;
}

input,
button {
    border: none;
    outline: none;
}

html,
body {
    /* 相当于1rem=10px */
    font-size: 10px;
}

/* iphone6的基准 */
@media screen and (min-width=375px) {

    html,
    body {
        font-size: 10px !important;
    }
}

/* iphone 6p */
@media screen and (min-width=414px) {

    html,
    body {
        /* 10*414/375=11.04 */
        font-size: 11.04px !important;
    }
}

@media screen and (min-width=768px) {

    html,
    body {
        /* 10*768/375=20.48 */
        font-size: 20.48px !important;
    }
}

设置项目自启动

vue.config.js中:

devServer: {
        open: true,
        host: "localhost",
        port: 9527
    }

vue代理跨域

vue.config.js中:

proxy: { //修改vue.config.js之后，一定要重写启动项目才能生效
      "/api": { //用  /api 代替 http://localhost:3000/api
        target: "http://localhost:3000/api",
        changOrigin: true,  //允许跨域
        pathRewrite: { //重写路径
          "^/api": ""
        }

可视化服务项目的flexable.js

src–utils–flexable.js

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 20
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))