「前端基础」旺财记账Vue2版本

4【项目】旺财 Vue 项目搭建

4.1 课前准备

4.2 使用@vue/cli创建项目

4.3 目录结构说明

目录:
public: 一般不会变动
src: 源代码source的简写src
assets(资源):除了HTML, CSS, JS, TS都放在这里. 比如图片, svg
components: 只放组件
router: 用来放路由
store:
views: 来放视图的
App.vue: 整个应用的视图
Main.ts: 入口文件, 主要功能来渲染App
registerServiceWorker.ts: 与PWA相关
shims-tsx.d.ts: TS相关的
shims-vue.d.ts: TS相关的
tests: 测试相关
下面都是配置文件
tsconfig.json: TS配置
vue.config.js: webpack配置

4.4 添加代码片段snippets

编辑器的配置:

• webstorm修改默认的vue模版
  

4.5 JS或TS里使用@

4.6 CSS或SCSS里使用~@

选择no, 我们在webpack配置不在webstorm配置

可以执行, 视频中的webstorm有红线, 自己的最新的2020.2的webstorm修复了这个bug.

5【项目】旺财 Vue 导航栏

5.1 使用VueRouter

HEAD表示当前版本

git reset --hard HEAD

默认直接找到router目录下的index.ts

import router from './router'

new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')
//等价
new Vue({
   
  router: router,
  store,
  render: h => h(App)
}).$mount('#app')

lint-staged用来检测代码是否出错

control+tab切换文件

5.2 讲Nav组件做成全局组件

首先考虑到直接将三个导航按钮写入到App.vue中, 要是有些页面不需要三个导航按钮呢.

因此, 需要将这三个导航按钮抽象成一个组件, 这样直接给Money.vue, Labels.vue和Statistics.vue引用

然后发现相同的代码引用了3次, 为啥不直接全局引用到main.ts中呢

自己练习过程中就是不断试错的过程, 需要自己把坑都走过了, 知道哪有坑就走的顺畅了.

拒绝直接给标准答案的方式教学

可以右击项目文件夹后, git commit

5.3 VueRouter 404页面

路由没有已知的页面, 就跳转到404

5.4 用Fixed还是Flex布局

@@@
千万别在手机上用Fixed
@@经验, 忠告@

加scoped后, 对应的class地方的标签出会出现data-v-xxxxx,
自动会在写该class的时候加上该部分(属性选择器)

<template>
  <div class="nav" data-v-xxxx>
      <router-link to="/money">记账</router-link>|
      <router-link to="/labels">标签</router-link>|
      <router-link to="/money">统计</router-link>
  </div>
</template>

<script lang="ts">
export default {
   
  name: 'Nav'
};
</script>

<style lang="scss">
  .nav[data-v-xxxx]{
   
    border: 1px solid red;
  }
</style>

等价于直接加scope

<template>
  <div class="nav">
      <router-link to="/money">记账</router-link>|
      <router-link to="/labels">标签</router-link>|
      <router-link to="/money">统计</router-link>
  </div>
</template>

<script lang="ts">
export default {
   
  name: 'Nav'
};
</script>

<style lang="scss">
  .nav{
   
    border: 1px solid red;
  }
</style>

@@@
只要能加scoped的地方都需要加, App.vue除外
@@经验, 忠告@

@@@
复