VUE项目笔记

VUE项目笔记

适用于各种系统的字体，官方链接

//编程字体
font-family: Consolas, monospace;

一、Vue手脚架常用配置

image.png

二、SVG配置

svg的两个依赖

• svgo-loader
• svg-sprite-loader

自动引入SVG

//vue.config.js
const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')
    config.module
      .rule('svg-spite')// 规则
      .test(/\.svg$/)// .svg结尾的全部
      .include.add(dir).end() // 只包含icons目录的.svg
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({ extract: false }).end()
      .use('svgo-loader').loader('svgo-loader')
      .tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] })).end() // 清除svg自带的填充颜色
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])
    config.module.rule('svg').exclude.add(dir) // 其他svg loader 排除icons目录
  }
}

//xxx.vue
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
try { 
      importAll(require.context('../assets/icons', true, /\.svg$/)) 
} catch (error) { 
      console.log(error)
 }

三、动态类

active-class="selected"
选中时显示此类的样式

//html
<div class="item" active-class="selected"> </div>

//css
.item.selected{
    color: green;
  }

四、scoped

scoped:范围，用于给class自定义类，并且只作用于当前文件
全局文件最好不加scoped

<style lang="scss" scoped></style>

五、input占位符

label默认为 inline-block

<label>
      <span class="name">备注：</span>
      <input type="text" placeholder="在这里输入备注"> //用户输入时消失
</label>

六、button内容获取

//ts
<button @click="inputContent">1</button>

inputContent (event: MouseEvent) {
    const button = (event.target as HTMLButtonElement) //强制指定类型
    const input = button.textContent! // 强制指定input存在
}

七、数据迁移策略

当遇到数据库版本与现有版本不匹配，让用户手动去改也不太现实，这时可以用到数据迁移
数据迁移一般是采用迁移复用的形式（依次更新版本），例，现有版本1~4，要从1版本升级到4版本，可从1到4依次升级，这样每次升级就只需写要升级的代码，其他代码可以复用

window.localStorage.setItem('version', '0.0.1');
const version = window.localStorage.getItem('version');
const recordList: Record[] = JSON.parse(window.localStorage.getItem('recordList') || '[]');

if (version === '0.0.1') {
  //数据库升级、迁移
  recordList.forEach(record => {
    record.createAt = new Date(2020, 1, 10);
  });
  //保存数据
  window.localStorage.setItem('recordList', JSON.stringify(recordList));
}

window.localStorage.setItem('version', '0.0.2');

localStorage只支持字符串

八、js导入到ts

缺点：ts不知道js类型，没有类型提示

//ts
const xxx = require ('@/xxx.js').xxx
或
const {xxx} = require ('@/xxx.js')
//js
export {xxx}

或

//ts
const xxx = require ('@/xxx.js').default
//js
export default xxx

九、ID生成器

//ts
let id: number = parseInt(window.localStorage.getItem('_idMax') || '0') || 0

function createId () {
  id++
  window.localStorage.setItem('_idMax', id.toString())
  return id
}

export default createId

十、.native

<Button @click.native="createTags">新增标签</Button> //引入的组件，在原组件上透传点击的所有事件

等价于

//引入组件
<Button @click="createTags">新增标签</Button>

//原组件
<div @click="$emit('click',$event)"> </div>

区别：.native包含了click的所有事件的传递，下面方法只传了点击事件，其他事件需要另外传
其他例子：keyup.native

十一、router

this.$route //获取路由信息this.$route.params.xxx
this.$router //路由器,可接页面
this.$router.back() //回退页面（有bug）

十二、.d.ts文件

用来存放全局的声明（类型）
不用导出，vue默认会到.d.ts这个类型声明