uni-app 最佳框架搭建实践

1: 将全局方法,全局变量放到一个文件里定义,并以global开头 然后在main.js里引入

遍历其中对象然后挂载到vue的原型上 

// 公共方法挂载在vue原型上
for (const key in commonMethods) {
  Vue.prototype[key] = commonMethods[key]
}

2:全局组件也可设置一个入口,引入入口,然后将内部组件全部都引入. 如element的写法

3:样式文件使用node-sass 定义全局的基本颜色,主颜色,背景色.变量

4:使用eslint+ prettier  文件如下

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },

  extends: ['eslint:recommended', 'plugin:vue/essential'],

  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    uni: true
  },

  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    parser: 'babel-eslint'
  },

  plugins: ['vue'],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-var': 'error',
    'no-dupe-args': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty': 2,
		'no-func-assign': 2,
    'valid-jsdoc': 1,
    'comma-dangle': [2, 'never'],
    eqeqeq: ['error', 'always'],
    quotes: ['error', 'single']
  },

  root: true,

  extends: ['eslint:recommended', 'plugin:vue/essential', '@vue/standard']
};

.prettierignore

package.json
.umi
.umi-production
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE.md

.prettierrc

{
  "singleQuote": true
}

.editorconfig

root = true

[*]
charset = utf-8
indent_style = tab
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,jsx,ts,tsx,vue}]
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

完整的资料 下载地址

再次封装一些路由的跳转

使用阿里图标iconfont

@font-face {
  font-family: 'iconfont';  /* project id 1771802 */
  src: url('https://at.alicdn.com/t/f.eot');
  src: url('https://at.alicdn.com/t/.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/.woff2') format('woff2'),
  url('https://at.alicdn.com/t/.woff') format('woff'),
  url('https://at.alicdn.com/t/.ttf') format('truetype'),
  url('https://at.alicdn.com/t/.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

css框架使用的是  colorui

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/105777518