项目如何创建

1. 进入你需要安装vue/cli脚手架的目录
2. 在此目录下全局安装`yarn global add @vue/cli@4.1.2`
3. `vue --version`查看版本，是否确认安装
4. vue create 项目名
5. 选择配置,下方图片是选择的配置，其它没有看到的默认按回车
6. yarn serve

配置图

vue 目录说明

- public 放静态页面
- src 所有的源代码放在里面
- assets 放背景图片/svg，除了HTML/css/js这些文件
- components 里面只放组件文件
- router 放路由ts文件
- store 放全局数据管理如vuex
- views 放视图，放一些重要的页面，比如首页

如何实现获取四个组件的数据

通过事件监听@update:value="xxx" 监听数据
通过$emit()在哪触发事件

 this.$emit('update:value', value);

使用.sync修饰符
使用Watch监听value值

@Watch('value')
onValueChanged(value: string) {
  this.$emit('update:value', value);
}

如何使用localStorage来保存数据

图表数据怎么做

先设置一个今天的时间
for循环遍历30天
创建dateString放入美化后的三十天
通过lodash找到groupedList里面的时间与dateString的时间一致
创建一个 空数组 将他们放进去

项目业务逻辑

实现一个可以记账的应用，其功能有新建、编辑、删除记账类型，用图表展示记账数据

money页面的实现由四个组件组成，标签、备注、支出/收入切换、金额数字面板

用到的技巧

数据迁移(增加版本)version

路由

在路由为/ 时且不想配置显示谁的组件时，直接将路径指向/money
{
    path:'/',
    redirect:'money'
}

404路由的配置

{
    path:'*',
    component: NotFound
}

在main.ts全局引用组件，好处不需要每次import

import Nav from '@/components/Nav.vue'

Vue.component('Nav',Nav)

slot(插槽)的用法



<template>
  <div class="layout-wrapper" :class="classPrefix && `${classPrefix}-wrapper`">
    <div class="content" :class="classPrefix && `${classPrefix}-content`   ">
      <slot/>     <!-- 在这里显示其它内容 -->
    </div>
    <Nav/>
  </div>
</template>

JS或者TS文件中使用@引入

@ 就代表src目录

vue组件使用～@引入css报错

在webstorm设置里webpack配置这个路径

@import "~@/assets/style/reset.scss";

在webstorm设置里webpack配置这个路径

C:\Users\Administrator\Desktop\wangcaijizhang-end\node_modules\@vue\cli-service\webpack.config.js

关于iconfont配置

安装
yarn add --dev svgo-loader
yarn add svg-sprite-loader -D

保持这两个版本以防报错
"svg-sprite-loader": "6.0.9",
"svgo-loader": "2.2.1",

shims-vue.d.ts引用下面代码，解决ts无法解析svg文件

declare module "*.svg" {
  const content: string;
  export default content;
}

在vue.config.js配置文件，可以直接引入icons文件里的所有svg

/* eslint-disable */
报错就加上这个配置

const path = require('path')

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/simple-book-1/'
    : '/',
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/.svg$/)
      .include.add(dir).end()
      .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()  //icon不显示删除这行配置试试，手动删除svg文件里的fill
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir)
  }
}

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

active-class="selected"用法，实现点击的元素改变样式

v-model用法

:value ="x"
@input ="x = $event.target.value"

可以用
v-model="x"

一. 在vue中使用ts vue-property-decorator

<script lang="ts">
import {Component,Prop} from 'vue-property-decorator'  //引入
import Vue from 'vue';

@Component //使用这个装饰器
export default class Types extends Vue {
  output: string = '0';  // 可在这里直接写data数据 无需 data(){}
  @Prop(Number) xxx: number | underfined  // 代替props
  事件处理函数可直接写 无需在methods:{}
  生命周期还是一样的写法
  created(){...}
}
</script>

1. @Prop数据类型声明

左边的数据类型是运行时的类型，右边是编译时的类型 初始值可以设置为undefined不然要写初始值是什么

使用Props父子组件传递数据

父组件
<template>
  <Tags :data-source="tags"/> 
</template>
data() {
  return {
    tags: ['衣','食','住','行']
    }
  }
  
子组件
<template>
  <li v-for="tag in dataSource" :key="tag">{{tag}}</li>
</template>
<script>
 var app = new Vue({
   props:{
     dataSource: string
   }
   })
</script>

如何TS文件中引用JS文件

xxx.ts

const model = require('@/model.js').default

1.const model = require('@/model.js').model
2.const {model} = require('@/model.js')

model.js

const localStorageKeyName = 'recordList'
const model = {
  fetch() {
    return JSON.parse(window.localStorage.getItem('localStorageKeyName') || '[]')
  },
  save(data) {
    window.localStorage.setItem('localStorageKeyName', JSON.stringify(data));
  }
}

export default model
用了1.2.方法的任意一种 需要改可以写成export {model}

.sync 怎么用(已有笔记)

v-deep 使用

组件中使用了scoped 我还是想将这个class影响全局，可使用这个

用Vuex/store进行数据管理

1. state  相当于vue的data

state.tagList 组件内获取类型
get tags() {  // 组件外获取类型 请使用get 函数
  return this.$store.state.tagList;
}

2. mutations 全局处理函数 相当于vue的methods


store.commit('fetchTags') 组件内获取函数
this.$store.commit('fetchTags')  组件外获取函数

3. action  调用mutations中的函数 
和mutations的区别是
       action             mutations
3.1. 它是可异步执行          不支持异步
3.2. 传递的参数是context    传递的参数是state
actions: {
  fn () {
    setTimeout(() => {
      context.commit('mutations定义的函数')
    }, 1000)
  }
}



4. getters  获取state数据
getters: {
  getNumber(state){
    return state.num > 0 ? state.num : 0;
  }
}

组件外获取getters
this.$store.getters.getNumber

Mixin用法

抽离vue组件中重复使用的功能

router-view

<template>
  <div>
    <!-- 在这里展示指定路由的内容 -->
    <router-view/>
  </div>
</template>

使用WebStorm 一键创建Vue模板&编辑模板样式

File - Settings - Editor - File and Code Templates-选择vue

<template>
#[[$END$]]#
</template>

<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component
export default class ${COMPONENT_NAME} extends Vue{

}
</script>

<style lang="scss" scoped>

</style>

Vue旺财笔记开发记录

项目如何创建

vue 目录说明

如何实现获取四个组件的数据

如何使用localStorage来保存数据

项目业务逻辑

用到的技巧

数据迁移(增加版本)version

路由

在main.ts全局引用组件，好处不需要每次import

slot(插槽)的用法

JS或者TS文件中使用@引入

vue组件使用～@引入css报错

关于iconfont配置

active-class="selected"用法，实现点击的元素改变样式

v-model用法

一. 在vue中使用ts vue-property-decorator

1. @Prop数据类型声明

使用Props父子组件传递数据

如何TS文件中引用JS文件

.sync 怎么用(已有笔记)

v-deep 使用

用Vuex/store进行数据管理

Mixin用法

router-view

使用WebStorm 一键创建Vue模板&编辑模板样式