uni-app框架搭建实践

文章摘要：uni-app框架搭建实践;​本文章向大家介绍uni-app框架搭建实践，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

uni-app框架搭建实践

本文章向大家介绍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-8indent_style = tabindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true[*.{js,jsx,ts,tsx,vue}]indent_style = tabindent_size = 2trim_trailing_whitespace = trueinsert_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