Tip 1: Reformat automatically adds semicolons to webstorm. If not, set it in seetings-editor-code style

Tip 2: In WebStorm, you can set the build templates. Go to settings-file and Code Templates

Preliminary navigation bar

//index.ts import Vue from 'vue'; import VueRouter from 'vue-router'; import Money from '@/views/Money.vue'; import Labels from '@/views/Labels.vue'; import Statistics from '@/views/Statistics.vue'; Vue.use(VueRouter); Const routes = [{path: '/', / / the default path redirect: '/ money'}, {path: '/ money, component: money}, {path: '/labels', component: Labels }, { path: '/statistics', component: Statistics } ]; const router = new VueRouter({ routes }); export default router;Copy the code

In app. vue, use
for page rendering and

for page switching

< the template > < div > < the router - view / > < hr / > < div > < the router - link to = "/ money" > account < / router - the link > | < the router - the link To = "/ labels" > tags < / router - the link > | < the router - link to = "/ statistics" > count < / router - the link > < / div > < / div > < / template >Copy the code

<router-view>

The

component is a functional component that renders the view component to which the path matches. A

rendered component can also embed its own

, depending on the nested path, rendering nested components.


Other attributes (those not used by the router-View) are passed directly to the rendered component, and in many cases the data for each route is contained within the route parameters.

<router-link>

The

component enables users to (click) navigate in applications with routing capabilities. The to attribute specifies the destination address, which is rendered as a
tag with the correct link by default. You can configure the tag attribute to generate additional tags. In addition, when the destination route is successfully activated, the link element automatically sets a CSS class name to indicate that the route is activated.


< p style = “max-width: 100%; clear: both;

  • It behaves the same whether it’s HTML5 History mode or hash mode, so you don’t have to change anything when you switch routing modes or degrade using Hash mode in IE9.
  • In HTML5 History mode,router-linkIt guards the click event so that the browser does not reload the page.
  • When you use it in HTML5 History modebaseAfter the choices, all of themtoProperties don’t need to be written.

Adding a 404 page

//index.ts {path: '*',//* matches all other paths component: NotFound}Copy the code
</div> <router-link to="/"> </router-link> <! - the second written < a href = "# /" > homepage < / a > -- > < / div > < / div > < / template >Copy the code

Add navigation bar styles

Caution: never use fixed positioning on mobile phones. Use Flex for this project

Layout components

Using slots to pass content:

//Layout.vue <template> <div class="nav-wrapper"> <div class="content"> <slot/> <! </div> </div> </template> <script lang="ts"> export default {name: 'Layout'}; </script> <style lang="scss" scoped> .nav-wrapper { display: flex; flex-direction: column; height: 100vh; } .content { overflow: auto; // Automatically scroll flex-grow: 1; } </style>Copy the code

Use Layout in money.vue (as well as allages.vue and statistics.vue)

<template> <div> <Layout> Money.vue <! </Layout> </div> </template> <script lang="ts"> export default {name: 'Money'}; </script>Copy the code

slot

Vue implements a content distribution API inspired by the draft Web Components specification that uses

elements as an outlet for hosting distribution content.

It allows you to compose components like this:

<navigation-link url="/profile">
  Your Profile
</navigation-link>
Copy the code

Then you might write in the
template:

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>
Copy the code

When the component is rendered,
will be replaced with “Your Profile”. The slot can contain any template code, including HTML:

<navigation-link url="/profile"> <! <span class="fa fa-user"></span> Your Profile </navigation-link>Copy the code

Even other components:

<navigation-link url="/profile"> <! <font awesome-icon name="user"></font awesome-icon> Your Profile </navigation-link>Copy the code

If the template of
does not contain a

element, anything between the component’s start tag and end tag is discarded.

The introduction of SVG

First go to Alibaba vector ICONS library and download the ICONS you want

svg-sprite-loader -D

Install the loader

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

Note that the vue build does not have webpack.config.js, so you need to change the webpack configuration to 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-sprite ').test(/.svg$/).include.add(dir).end() // contains the ICONS directory .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract:false}).end() .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) // other SVG loaders exclude the ICONS directory // config.module //.rule(' svG-sprite ') // .test(/.(svg)(?.*)?$/) // .include.add(dir).end() // .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract: false}).end() // .use('svgo-loader').loader('svgo-loader') // .tap(options => ({... options, plugins: [{removeAttrs: {attrs: 'fill'}}]})) // .end() // config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}]) // config.module.rule('svg').exclude.add(dir) } }Copy the code

Note:

.use('svgo-loader').loader('svgo-loader') .tap(options => ({... options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()Copy the code

This code overlays the original color of ICONS so that the entire icon can be highlighted when clicked later. If the icon itself is colored, you can choose to remove these two lines of code.

Highlight selection using active-class

<template> <nav> <router-link to="/labels" class="item" active-class="selected"> <Icon name="label"/> label </router-link> <router-link to="/money" class="item" active-class="selected"> <Icon name="money"/> </router-link> <router-link To ="/statistics" class="item" active-class="selected"> <Icon name="statistics" </router-link> </nav> </template> . <style lang="scss" scoped> @import "~@/assets/style/helper.scss"; nav { ... > .item.selected{ color: $color-highlight; } } </style>Copy the code

Active-class adds the Selected tag to the object after it is clicked, and then adjusts the color with >.item.selected.