Vue—项目搭建纪录

Vue/Cli 创建项目

$ vue create myApp
$ cd app
$ npm run serve

配置 Vue Router

首先需要对项目的页面结构有个大致规划。以我的项目为例

- '/money': money页面（默认进入money页面）
- '/labels': labels页面
- '/statistics': statistics页面
-  404页面

进入router文件夹的index.ts文件下修改路由配置，并在views文件夹内创建对应的.vue组件

const routes = [{
    //访问根目录 直接重定向到money页面
    path: '/',
    redirect:'money'
  },{
    path: '/money',
    component: Money
  },{
    path: '/labels',
    component: Labels
  },{
    path: '/statistics',
    component: Statistics
  },{
    path: '*',
    component: NotFound
}]

在App.vue的template模板内写入标签，这样Vue Router就会根据访问路径不同去切换显示页面了。

项目思路、踩坑记录

导航栏制作

1. 底部导航栏

   组件的引入形式

   • 放在App.vue里 404页面不需要导航

   • 分别放在每个页面中
     1) 全局引入

     //App.vue
     import Nav from "@/components/Nav.vue"
     Vue.component('Nav',Nav)

     2) 局部引入 代码冗余

   • 结论：全局引入，局部使用。

2. [踩坑]底部导航栏的布局方式

   • fixed布局：移动端坑太多（搜索引擎得知

   • flex布局：推荐。
     实现方式：

     .container{ 
       display:flex; 
       flex-direction:column;
       height: 100vh;
     }
     .content{
       flex-grow：1; //实现内容的铺满
       overflow: auto;
     }

3. 组件化开发
   重复的东西提取出来
   不重复的东西通过props和插槽搞定
   从第一个项目开始，拒绝重复！

4. [踩坑] 使用 svg-sprite-loader 引入 icon
   1) 无法在 TypeScript 中引入 SVG 文件
   学自 StackOverflow 点击查看

     //shims-vue.d.ts
   declare module "*.svg" {
     const content: string;
     export default content;
   }

   2) 配置 SVG sprite loader

5. [踩坑] 如何引入整个 icons 文件夹里的 .svg文件（同样适用于其他后缀）

   let importAll = (requireContext:__WebpackModuleApi.RequireContext) 
                       => requireContext.keys().forEach(requireContext);
   importAll(require.context("../assets/icons", true, /\.svg$/));

6. 路由激活 active-class

   
   ...

   选中激活时，加上selected类

7. [踩坑] 解决
   使用svgo-loader

Money.vue页面

1. CSS的规划

   • reset：padding,margin,box-sizing ...
   • 全局样式：写在App.vue中

   • 变量：多处用到的样式，可以新建一个scss文件，以变量形式保存，用到的地方直接引入。例如:

     //style.scss
     $color-active: red
     //cpn.vue
     .active{
      color:$color-active;
     }

   • 局部样式：
2. HTML优化
   HTML行数过多则拆成组件，降低耦合度、减小debug难度。

3. TS实现

   • 模块化
   • JS逻辑+Type

   1. 第一个TS组件

      • 引入Component装饰器
        import { Component } from "vue-property-decorator";

      • 使用Component装饰器

        @Component
        export default class Type extends Vue {
          number = 0;    //被装饰器放在data里
          add(n: Number) {     //被装饰器放在methods里
            this.number += n;
          }
        }

---

未完待续