Environment set up

// Install @vue/ CLI4.1.2 or later vue --version // If the version is earlier than 4.1.2, install vue again. -cli yarn Global remove@vue/CLI YARN Global add Js v10 or later. Vue create money-vue CD money-vue YARN serveCopy the code

import alias

  • Can be achieved by@ / directory nameIntroduce TS/JS files
  • Can be achieved by~ @ / directory nameImport CSS/SASS files

Note: the @ here represents the SRC directory

Vue Router

Use the Vue Router to create the bottom navigation, using hash mode, which the Vue Router defaults to. Again, the page has three pages for billing, labels and statistics, as well as a 404 page. Enter router/index.ts, add a component, and configure the component corresponding to the path. The code is as follows:

const routes: Array<RouteConfig> = [ { path:'/', redirect:'/money' }, { path:'/money', component: Money }, { path:"/labels", component:Labels }, { path:'/statistics', component:Statistics }, { path:'/labels/edit/:id', Component :EditLabel}, {path:"*",// Display 404 page when path: NotFound}];Copy the code

Use

in app.vue to give the router’s rendering area.

Global components Some pages use a component more than once. We can import it globally in main.js so that we don’t have to import it across pages. Vue.component(‘Nav’, Nav) in main.js, so that each page does not have to be imported again, but can be used directly.

Using SVG

In this project, use SVG as the icon, go to Iconfont. Cn to download the corresponding icon to the project, and choose SVG as the download mode.

Import Icon using SVG-sprite-loader

The installation command is as follows:

 yarn add svg-sprite-loader -D
Copy the code

To use svG-sprite-loader, we need to change the webpack configuration file, we only have vue.config. js, we need to translate the content changed by webpack into vue.config. js, and finally explore the code needed to write vue.config. js as follows:

const path = require('path') module.exports = { lintOnSave: false, chainWebpack:config=>{ const dir = path.resolve(__dirname,'src/assets/icons') config.module .rule('svg-sprite') The.test (. / \ $/ SVG). Include. Add (dir). The end () / / directory contains the ICONS .use('svg-sprite-loader').loader('svg-sprite-loader'),options({extract:false}).end() config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}]) Config.module.rule (' SVG ').exclude. Add (dir)// Other SVG loaders exclude ICONS directory}}Copy the code

Svg-sprite-loader will generate an SVG tag in the body, and then convert the image into a symbol tag to display on the page.

<template>
    <svg class="icon">
        <use xlink:href="#Money"></use>
    </svg>
</template>

<script>
    import '@/xx/Money.svg'
</script>
Copy the code

Importing SVG in bulk

Import x from “@/ XXX “in script every time you reference an SVG image. What if there are 100 images? This is not introducing 100 times, you see, again. There are methods that can be introduced once, and the code is as follows:

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

Use svgo-loader to delete fill

SVG comes with fill attribute, so we cannot change their color through CSS, so we need to delete the SVG comes with fill. However, when there are many SVG, it is not much trouble to delete them one by one, so we use SvGo-Loader to delete the fill, and the installation command is as follows:

 yarn add --dev svgo-loader
Copy the code

Write the following code in vue.config.ts:

const path = require('path') module.exports = { 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() // Delete the SVG fill attribute .use('svgo-loader').loader('svgo-loader') .tap(options => ({... options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end() config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{ plainSprite: true}]) config.module.rule('svg').exclude.add(dir) } }Copy the code

Using Vuex

Vuex is used to achieve global data management in the project, using the following methods:

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {//state equals data count: 0}, mutations: Payload increment (state) {state.count++}}}Copy the code

We get the state object via store.state and trigger the state change via store.mit:

this.$store.. Use this.$store.com MIT ('increment') console.log(store.state.count) // -> 1Copy the code

Benefits of using Vuex

Decoupling: Put all data related logic into store (also known as Model in MVC, changed the name of the store, data read and write more convenient: any component can read and write directly, no matter where it is more control of the data: components can only read and write data using the API provided by storeCopy the code