uniapp自定义导航和头部

 

1.  src/compontents/uni-nav-bar/uni-nav-bar.vue

2. src/compontents/uni-tab-bar/uni-tab-bar.vue

3. src/layout/index.vue

4. src/pages/home/index.vue

5. src/pages/mine/index.vue

6. App.vue

7. global.js

   'use strict'
   
   const globalData = {
     set: (path, value, api) => {
       path && (globalData[path] = value)
       return true
     },
     get: path => {
       return path ? globalData[path] : globalData
     },
     delete: path => {
       delete globalData[path]
       return true
     }
   }
   
   export default globalData
   

8. main.js

   import { createSSRApp } from 'vue'
   import App from '@/App.vue'
   import store from '@/store'
   import Layout from '@/layout'
   import '@/static/styles/_index.scss'
   
   export function createApp() {
     const app = createSSRApp(App)
     app.use(store)
     app.component('LayoutPage', Layout)
     return {
       app
     }
   }
   

9. page.json

   {
     "pages": [
       {
         "path": "pages/home/index",
         "style": {
           "navigationBarTitleText": "首页",
           "navigationStyle": "custom"
         }
       },
       {
         "path": "pages/mine/index",
         "style": {
           "navigationBarTitleText": "我的",
           "navigationBarBackgroundColor":"#F5F7F9",
           "navigationStyle": "custom"
         }
       }
     ],
     "globalStyle": {
       "navigationBarBackgroundColor": "#6477F4",
       "navigationBarTextStyle":"white"
     },
     "tabBar": {
       "color": "#9297B1",
       "selectedColor": "#6175F4",
       "borderStyle": "black",
       "backgroundColor": "#FFFFFF",
       "list": [{
         "pagePath": "pages/home/index",
         "text": "首页"
       },
         {
           "pagePath": "pages/mine/index",
           "text": "我的"
         }
       ]
     }
   }
   

   习惯文件

10. .eslintrc.js

    /**
     * 规则的值
     * ‘off’ 或 0：关闭对该规则的校验；
     * ‘warn’ 或 1：启用规则，不满足时抛出警告，不会退出编译进程；
     * ‘error’ 或 2：启用规则，不满足时抛出错误，会退出编译进程；
     * 如果某项规则，有额外的选项，可以通过数组进行传递，数组的第一位必须是错误级别。
     * 如 ‘semi’: [‘error’, ‘never’], never就是额外的配置项
     */
    module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
        'vue/setup-compiler-macros': true
      },
      extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
      plugins: ['prettier'],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'prettier/prettier': 'error',
        'no-tabs': 'off',
        'no-irregular-whitespace': 'off',
        'vue/max-attributes-per-line': [
          'warn',
          {
            singleline: {
              max: 10
            },
            multiline: {
              max: 1
            }
          }
        ],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multiline-html-element-content-newline': 'off',
        'vue/name-property-casing': ['error', 'PascalCase'],
        'vue/no-v-html': 'off',
        'accessor-pairs': 2,
        'arrow-spacing': [
          2,
          {
            before: true,
            after: true
          }
        ],
        'block-spacing': [2, 'always'],
        'brace-style': [
          2,
          '1tbs',
          {
            allowSingleLine: true
          }
        ],
        camelcase: [
          0,
          {
            properties: 'always'
          }
        ],
        'comma-dangle': [2, 'never'],
        'comma-spacing': [
          2,
          {
            before: false,
            after: true
          }
        ],
        'comma-style': [2, 'last'],
        'constructor-super': 2,
        curly: [2, 'multi-line'],
        'dot-location': [2, 'property'],
        'eol-last': 2,
        eqeqeq: ['error', 'always', { null: 'ignore' }],
        'generator-star-spacing': [
          2,
          {
            before: true,
            after: true
          }
        ],
        'handle-callback-err': [2, '^(err|error)$'],
        indent: [
          2,
          2,
          {
            SwitchCase: 1
          }
        ],
        'jsx-quotes': [2, 'prefer-single'],
        'key-spacing': [
          2,
          {
            beforeColon: false,
            afterColon: true
          }
        ],
        'keyword-spacing': [
          2,
          {
            before: true,
            after: true
          }
        ],
        'new-cap': [
          2,
          {
            newIsCap: true,
            capIsNew: false
          }
        ],
        'new-parens': 2,
        'no-array-constructor': 2,
        'no-caller': 2,
        'no-class-assign': 2,
        'no-cond-assign': 2,
        'no-const-assign': 2,
        'no-control-regex': 0,
        'no-delete-var': 2,
        'no-dupe-args': 2,
        'no-dupe-class-members': 2,
        'no-dupe-keys': 2,
        'no-duplicate-case': 2,
        'no-empty-character-class': 2,
        'no-empty-pattern': 2,
        'no-eval': 2,
        'no-ex-assign': 2,
        'no-extend-native': 2,
        'no-extra-bind': 2,
        'no-extra-boolean-cast': 2,
        'no-extra-parens': [2, 'functions'],
        'no-fallthrough': 2,
        'no-floating-decimal': 2,
        'no-func-assign': 2,
        'no-implied-eval': 2,
        'no-inner-declarations': [2, 'functions'],
        'no-invalid-regexp': 2,
        'no-iterator': 2,
        'no-label-var': 2,
        'no-labels': [
          2,
          {
            allowLoop: false,
            allowSwitch: false
          }
        ],
        'no-lone-blocks': 2,
        'no-mixed-spaces-and-tabs': 0,
        'no-multi-spaces': 2,
        'no-multi-str': 2,
        'no-multiple-empty-lines': [
          2,
          {
            max: 1
          }
        ],
        'no-native-reassign': 2,
        'no-negated-in-lhs': 2,
        'no-new-object': 2,
        'no-new-require': 2,
        'no-new-symbol': 2,
        'no-new-wrappers': 2,
        'no-obj-calls': 2,
        'no-octal': 2,
        'no-octal-escape': 2,
        'no-path-concat': 2,
        'no-proto': 2,
        'no-redeclare': 2,
        'no-regex-spaces': 2,
        'no-return-assign': [2, 'except-parens'],
        'no-self-assign': 2,
        'no-self-compare': 2,
        'no-sequences': 2,
        'no-shadow-restricted-names': 2,
        'no-spaced-func': 2,
        'no-sparse-arrays': 2,
        'no-this-before-super': 2,
        'no-throw-literal': 2,
        'no-trailing-spaces': 2,
        'no-undef': 2,
        'no-undef-init': 2,
        'no-unexpected-multiline': 2,
        'no-unmodified-loop-condition': 2,
        'no-unneeded-ternary': [
          2,
          {
            defaultAssignment: false
          }
        ],
        'no-unreachable': 2,
        'no-unsafe-finally': 2,
        'no-unused-vars': [
          2,
          {
            vars: 'all',
            args: 'none'
          }
        ],
        'no-useless-call': 2,
        'no-useless-computed-key': 2,
        'no-useless-constructor': 2,
        'no-useless-escape': 0,
        'no-whitespace-before-property': 2,
        'no-with': 2,
        'one-var': [
          2,
          {
            initialized: 'never'
          }
        ],
        'operator-linebreak': [
          2,
          'after',
          {
            overrides: {
              '?': 'before',
              ':': 'before'
            }
          }
        ],
        'padded-blocks': [2, 'never'],
        quotes: [
          2,
          'single',
          {
            avoidEscape: true,
            allowTemplateLiterals: true
          }
        ],
        semi: [2, 'never'],
        'semi-spacing': [
          2,
          {
            before: false,
            after: true
          }
        ],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, 'never'],
        'space-in-parens': [2, 'never'],
        'space-infix-ops': 2,
        'space-unary-ops': [
          2,
          {
            words: true,
            nonwords: false
          }
        ],
        'spaced-comment': [
          2,
          'always',
          {
            markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
          }
        ],
        'template-curly-spacing': [2, 'never'],
        'use-isnan': 2,
        'valid-typeof': 2,
        'wrap-iife': [2, 'any'],
        'yield-star-spacing': [2, 'both'],
        yoda: [2, 'never'],
        'prefer-const': 2,
        'object-curly-spacing': [
          2,
          'always',
          {
            objectsInObjects: false
          }
        ],
        'array-bracket-spacing': [2, 'never']
      },
      globals: {
        uni: true,
        wx: true
      }
    }
    

11. .prettierrc.js

    module.exports = {
      printWidth: 120, // 一行最多 120 字符(默认80)
      tabWidth: 2, // 每个tab相当于多少个空格（默认2）
      useTabs: false, // 是否使用tab进行缩进（默认false）
      semi: false, // 行尾需要有分号(默认true)
      singleQuote: true, // 使用单引号（默认false）
      quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
      jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
      trailingComma: 'none', // 多行使用拖尾逗号（默认none）
      bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
      jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
      htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
      arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
      endOfLine: 'auto' // 行尾换行符
    }
    

12. .gitignore忽略文件

    .DS_Store
    node_modules
    /dist
    /src/unpackage
    /src/.hbuilderx
    
    
    # local env files
    .env.local
    .env.*.local
    
    # Log files
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    pnpm-debug.log*
    
    # Editor directories and files
    .idea
    .vscode
    *.suo
    *.ntvs*
    *.njsproj
    *.sln
    *.sw?