Recently, I completed an accounting project, and encountered many problems in the process of study and production. Please record them

SRC = @

<script>
    import x from '.. /components/Test.vue'
    // = import x from '@/components/Test.vue'
</script>
Copy the code

2. Use @ in style to indicate that SRC needs ~@

<style lang="scss">
    @import "~@/assets/styles/test.scss"
</style>
Copy the code

(@typescript-eslint/no-var-requires) Require statement not part of import statement.(@typescript-eslint/no-var-requires)

- Add to eslintec.js file:Copy the code
module.exports = {
  ...
  rules: {
    ...
    '@typescript-eslint/no-var-requires': 0}}Copy the code

4. Import files with the same suffix from a directory once

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

5. SVG can’t change colors:

- After looking at the source file, I found that there was a fill attribute in the path tag, which was used to customize the color of the icon. As a result, when I set the color, it could not be synchronized to the icon label. This problem can be updated by deleting all these fill attributes, but it is too troublesome to delete them one by one every time. Therefore, I searched many similar blogs on the Internet and found a solution, using SvGo-Loader to prevent the rendering of this fill attribute. This saves you from having to change the FILL attribute of an SVG file one by one when you import it laterCopy the code

5,height = line-heightCan achieve vertical center. But make sure it’s only one line

Query typescript versions:npm info typescript version

7. TypeScript features

  1. Automatic prompts are more intelligent
  2. You can’t just say.tostring ()
  3. Compiler error: Typescript cannot be converted to JS
  4. The error will only be displayed on the terminal, not in the browser console

How do I generate Vue components using TypeScript

import {Component,Prop} from 'vue-property-decorator'@component // tell typescript, export... Is a component of Vueexport defaulty class Types extends Vue{
    type = The '-'; @Prop(Number) xxx: number | undefined; // Prop tell Vue, XXX is not data Prop // Number tell Vue, XXX runtime is a property name/Number / / XXX/Number | undefined told the typescript XXX compile-time typemounted(){ console.log(this.xxx.xxx); // Mounted if XXX is of the same type as number, XXX does not contain the XXX attributemounted() {if(this.xxx === undefined){
            console.error('undefined')}else{
            console.log(this.xxx.toString())
        }
    }
}
Copy the code

9. The nature of TypeScript

10. Three ways to write Vue components (Single file Components)

  1. With JS object
exportdefault { data, props , methods, created, ... }Copy the code
  1. By the TypeScript
<script lang="ts">
import {Component,Prop} from 'vue-property-decorator';

@Component 
export default class XXX extends Vue {
    yyy:string = 'hi'
    @Prop(Number) zzz: number | undefined;
}
<script>
Copy the code
  1. With JS class
<script lang="ts">
import {Component,Prop} from 'vue-property-decorator';

@Component
export default class XXX extends Vue {
    yyy = 'hi'
}
<script>
Copy the code
  • v-model
:value="value"
@input="value = $event.target.value"// Can be abbreviated to v-model="x"
Copy the code
  • Declare an array filled with strings
tags: string[] = []
Copy the code

11. Database upgrade

const version = window.localStorage.getItem(version) || '0'
const recordList = JSON.parse(window.lacalStorage.getItem('recordList') | |'[]')
if(version === '0.0.1'){// Database upgrade, Data migration recordList. ForEach (record = > {record. CreateAt = new Date (2020, 1)}) / / save the data window. The localStorage. SetItem ('recordList',JSON.stringify(recordList))
}

window.localStorage.setItem('version'.'hundreds') 
Copy the code

12, How to import JS in TS file

const model = require('@/model.js').model
Copy the code

13, aboutthis.$route 和 this.$router

  • this.$routeTo obtain routing information
  • this.$routerIt is a router that can be used for forwarding operations

14. What are the benefits of global state management (also called global data management)?

  • Decoupling: Put all data-related logic into store (MVC’s Model, changed name)
  • Data read and write easier: can any component read and write data directly, no matter where it is
  • More control: Components can only read and write data using the API provided by the Store. (There is no way to forbid tagList and recordList to be pushed directly.)

15, Vuex

The use of Vuex

import Vue from 'vue'import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {                 //data
    count: 0
  },
  mutations: {             //methods
    xxx (state) {
      state.count++
     }
  }
})
Copy the code
  • Note: the mutations function can accept only two parameters, the first is state and the second is payload
  • State objects are obtained via store.state, and state changes are triggered via the store.mit method:
this.$store..state.count       // 0

store.commit('xxx')
// === this.$store.commit('xxx')

console.log(store.state.count) // -> 1
Copy the code
  • Vuex
    • The state: the data
    • Mutations: methods
    • Actions: Call methods (asynchronous)

16. Depth action selector

  • If you want one of the selectors in the scoped style to go “deeper”, such as affecting child components, you can use the >>> operator:
<style scoped>
    .a >>> .b { /* ... */ }
</style>
Copy the code
  • Some preprocessors like Sass don’t parse >>> correctly. In this case you can use the /deep/ or ::v-deep operators instead
  • :: V-deep is the most compatible syntax

17, Object. Freeze (…). Make it impossible to change anything

18. Mobile phone debugging method

  • On the same LAN as your computer, visit http://xxx:8080/
  • Chrome remote debugging/Safari remote debugging
  • vConsole

19. Project Description

  • XX bookkeeping is a simple bookkeeping application. It is also a small application made based on Vue, Vue Router, Vuex and Typescript
  • The referenced design style refers to the mint bookkeeping app
  • There were many issues with Webpack and TypeScript during production
  • The source code is fully implemented in TypeScript, using decorators and other methods.
  • Source code address: github.com/wbh13285517…
  • Address: preview wbhchixigua. Top/MyMoneyBook…
  • Code cloud source address: gitee.com/wbhchixigua…
  • Yards cloud preview address: wbhchixigua. Gitee. IO/mymoneybook…