【项目-记账-meoney-00】目录结构说明

大纲链接 §

[toc]

技术栈

  • 使用@vue/cli创建项目以及打包部署
  • 使用Vue Router添加底部导航
  • 使用Vuex管理状态
  • 使用TypeScript
  • 使用SCSS
  • 配置实现批量引入SVG Icon，并封装为组件
  • 页面部署到GitHub和Gitee码云

创建项目

  • 基础版本
  • 配置

步骤

  • vue create money
  • cd money
  • yarn serve

@vue/cli选项

  • Manually select features
    • Babel
    • TypeScript
    • Progressive Web App (PWA) Support
    • Router
    • Vuex
    • CSS Pre-processors
    • Linter / Formatter
  • Use class-style component syntax
  • Use Babel alongside TypeScript
  • Use hash mode for router?
  • Sass/SCSS
  • ESLint with error prevention only
  • Lint and fix on commit
  • In dedicated config files

package.json 初步配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

{
  "name": "money",
  "version": "0.1.0",
  "private": true,
  "description": "这是一个基于Vue2版本的记账应用",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "deploy": "bash deploy.sh",
    "build:dev": "cross-env NODE_ENV=development yarn build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.3",
    "vue-template-compiler": "^2.6.11",
    "vuex-module-decorators": "^1.0.1"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}
  • yarn serve 开发预览
  • yarn build:dev 打包

目录结构说明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

money
├─ .gitignore
├─ package.json
├─ public
│  └─ favicon.ico
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  ├─ icons
│  │  │  └─ *.svg
│  │  ├─ qrcode.png
│  │  └─ style
│  │     ├─ global.scss
│  │     └─ reset.scss
│  ├─ components
│  │  ├─ *.vue
│  │  ├─ Money
│  │  │  ├─ numpad
│  │  │  │  └─ *.vue
│  │  │  └─ *.vue
│  │  └─ Nav.vue
│  ├─ constants
│  │  └─ *.ts
│  ├─ custom.d.ts
│  ├─ lib
│  │  └─ *.ts
│  ├─ main.ts
│  ├─ mixins
│  │  └─ *.ts
│  ├─ router
│  │  └─ index.ts
│  ├─ shims-tsx.d.ts
│  ├─ shims-vue.d.ts
│  ├─ store
│  │  ├─ index.ts
│  │  └─ modules
│  │     ├─ moneySessionStore.ts
│  │     ├─ recordStore.ts
│  │     ├─ StatisticsStore.ts
│  │     └─ tagStore.ts
│  └─ views
│     ├─ *.vue
│     └─ Money.vue
├─ tsconfig.json
├─ vue.config.js
└─ yarn.lock
  • 配置文件
    • tsconfig.json
    • vue.config.js 使用chainWebpack覆盖 webpack 配置
  • 入口文件main.ts
  • 图标 public/；静态资源 背景图片 src/assets
  • 页面展示组件 src/view
  • 功能组件 src/components
  • 功能函数 src/lib
  • 复用逻辑src/mixins
  • 路由 src/router
  • 状态管理 src/store

优化配置

IDE配置

  • 添加 vue snippets
  • IDE 配置
    • VS Code安装Vetur和Vue VSCode Snippets
    • WebStorm中搜索template找到File and Code Templates中的Vue相关模板可以修改
  • vbase快速调用组件初始模板

配置别名 import alias不用自己计算相对路径

  • test.vue
1
2
3
4

// script
import x from './components/Test.vue'
// 替换为
import xxx from "@/components/Test.vue";

1
2
3
4

/* style */
@import "../assets/styles/test.scss"
/* 替换为 */
@import "~@/assets/styles/test.scss";
  • TS/JS 可以通过 @/目录名 引入文件
  • CSS/SASS 可以通过 ~@/目录名 引入文件
  • WebStorm 需要在设置里搜索 webpack，然后填上路径（VSCode不需要配置 无报错提醒）
    • 项目绝对路径\node_modules\@vue\cli-service\webpack.config.js

tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

参考