Vue版记账项目总结环境搭建 import alias 可以通过@/目录名引入TS/JS文件可以通过~@/目录名引入c

环境搭建

// 全局安装@vue/cli4.1.2以上版本  
vue --version //如果版本低于4.1.2,需要重装vue-cli  
yarn global remove @vue/cli  
yarn global add @vue/cli@4.1.2
// 安装Node.js v10以上版本  
vue create money-vue  
cd money-vue 
yarn serve

import alias

可以通过@/目录名引入TS/JS文件
可以通过~@/目录名引入css/sass文件
注意：这里的@代表src目录

Vue Router

使用Vue Router制作底部导航，使用hash模式，Vue router默认hash模式，同样，页面有记账，标签和统计三个页面，还有一个404页面。进入router/index.ts，添加组件，配置路径对应的组件，具体代码如下:

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:"*",//当路径不是上面几个时显示404页面
    component:NotFound
  }
];

在App.vue中使用<router-view>给出router的渲染区域。

全局组件
有些页面会多次使用某个组件，我们可以在main.js文件里全局导入，这样我们就不用在各个页面导入了。如Nav这个导航组件，三个页面都有，会导致重复，在main.js里导入Nav组件，Vue.component('Nav',nav)，这样每个页面都不必在重新导入，而是直接使用。

使用SVG

在此项目，使用svg作为图标，去Iconfont.cn下载相应的图标到项目中，选择下载方式为svg下载。

使用svg-sprite-loader导入Icon

安装命令如下:

 yarn add svg-sprite-loader -D

使用svg-sprite-loader得需要改webpack配置文件，我们只有Vue.config.js,需要把webpack修改的内容，翻译一下写到Vue.config.js里,最后探索到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()//包含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)//其他svg loader 排除 icons 目录
  }

}

svg-sprite-loader会把先在body里生成一个svg标签，然后再把图片都变成symbol标签，从而显示到页面上,使用方法如下:

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

<script>
    import '@/xx/Money.svg'
</script>

批量引入svg

每引用一个svg图片就要在script里写一次import x from "@/xxx,如果有100张图片呢?此不是要引入100次，你看，又重复了。一次性引入的方法是有的，代码如下：

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

使用svgo-loader删除fill

svg自带fill属性使我们无法通过css改变他们的颜色，所以我们要将svg自带的fill删掉，但是，当svg较多时，逐个删除很少麻烦，因此我们使用svgo-loader删除fill,安装命令如下:

 yarn add --dev svgo-loader

在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()
      //删除svg自带的fill属性
      .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)
  }
}

使用Vuex

项目中使用Vuex实现全局数据管理，使用方法如下：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {           //state相当于data
    count: 0
  },
  mutations: {      //mutation相当于methods
                    //接受两个参数，第一个是 state，第二个是 payload
    increment (state) {
      state.count++
    }
  }
})

我们通过store.state来获取状态对象，通过store.commit触发状态变更:

this.$store..state.count       // 0

store.commit('increment')// 也可写为:this.$store.commit('increment')

console.log(store.state.count) // -> 1

使用Vuex的好处

解耦：将所有数据相关的逻辑放入 store（也就是 MVC 中的 Model，换了个名字而已  
数据读写更方便：任何组件不管在哪里，都可以直接读写数据  
控制力更强：组件对数据的读写只能使用 store 提供的 API 进行