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(?developer/article/1939042/&);
src: url(?developer/article/1939042/&) format('embedded-opentype'),
url(?developer/article/1939042/&) format('woff2'),
url(?developer/article/1939042/&) format('woff'),
url(?developer/article/1939042/&) format('truetype'),
url(?developer/article/1939042/&) 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
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读