【项目-喵内0∞0记账-meowney-00】目录结构说明


[toc]


喵内0∞0记账 原名猫内记账


  • @vue/cli创建项目
  • VueRouter添加底部导航
  • 引入SVG Icon
  • 部署到GitHub和码云

  • 基础版本
  • 配置

创建项目

步骤

  • vue create money
  • cd money
  • yarn serve

vue create配置

  • Vue2.x

目录结构说明

  • 不会变的icon放到 public/img 会变的或者背景图片放到src/assets目录
  • 完整的页面展示组件放在src/view 功能组件放在src/components
  • 入口文件main.ts渲染app
  • 会更改的配置文件tsconfig.json
  • vue.config.js配置webpack

优化配置

IDE配置

  • 添加vue snippets
  • VS Code安装VeturVue 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

参考