uniapp 框架搭建及使用

uniapp官方文档
uview官网文档
前期工作:
1.下载Hbuilder X编辑器;2.熟悉uniapp的相关文档;3.查找合适的UI组件库,我使用的是uview(适配H5和小程序)

创建uniapp

  • 新建: 新项目的话打开Hbuilder X选择项目(选择默认模板即可):文件=》新建=》项目
  • 旧项目运行:从git上拉取下uniapp项目运行,需要先执行npm init -y,进行初始化操作,不然无法运行起来

安装导入uview组件库

  1. 工具=》插件安装=》插件1:uni_modules(地址:https://ext.dcloud.net.cn/plugin?id=1593) ;插件2:"scss/sass编译"3;3.建议安装”eslint-js“与”eslint-plugin-vue“后续会用到
  2. 引入并使用uView的JS库
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
  1. 在引入uView的全局SCSS主题文件
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
  1. 引入uView基础样式
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-ui/index.scss";
</style>
  1. 配置easycom组件模式
// pages.json
{// 如果您是通过uni_modules形式引入uView,可以忽略此配置"easycom": {"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}

到这里uview就引入完成可以正常使用啦!

配置eslint(对代码有规范要求或需要团队协作的可以看这个)

  1. 引入插件:”eslint-js“与”eslint-plugin-vue“(上面有写)
  2. 在项目根目录,新建 .eslintrc.js 文件,这样eslint插件会优先读取项目下的配置文件
  3. 修改配置文件(这是我在使用的一些规则,大家可按照自己的习惯来调整)

详细文档参考:eslint中文网

// 更详细的配置文档请参考:https://github.com/vuejs/eslint-plugin-vue#gear-configs
module.exports = {'root': true,'env': {'node': true,'es6': true},'extends': ['plugin:vue/recommended', 'eslint:recommended'],'parserOptions': {'ecmaVersion': 'latest','sourceType': 'module'},'settings': {'html/html-extensions': ['.erb','.handlebars','.hbs','.htm','.html','.mustache','.nunjucks','.php','.tag','.twig','.wxml','.we']},'globals': {/** 避免uni报错 */'uni': true,'UniApp': true},'rules': {// 末尾不添加分号'semi': [2, 'never'],'semi-spacing': [2, {'before': false,'after': true}],// 缩进'indent': [2, 2, {'SwitchCase': 1}],// 使用单引号'quotes': [2, 'single', {'avoidEscape': true,'allowTemplateLiterals': true}],// 禁止修改const声明的变量'no-const-assign': 2,// 在创建对象字面量时不允许键重复 {a:1,a:1}'no-dupe-keys': 2,// 函数参数不能重复'no-dupe-args': 2,// switch中的case标签不能重复'no-duplicate-case': 2,// 正则表达式中的[]内容不能为空'no-empty-character-class': 2,'no-empty-pattern': 2,// 禁止使用未申明的变量'no-undef': 2,// 禁止将变量初始化为 undefined'no-undef-init': 2,// 禁止多余的空格'no-multi-spaces': 2,// 字符串不能用\换行'no-multi-str': 2,// 禁止多余的空行'no-multiple-empty-lines': [2, {'max': 1}],// 禁止未使用过的变量'no-unused-vars': [2, {'vars': 'all','args': 'none'}],// 禁止在 return、throw、continue 和 break 语句之后出现不可达代码'no-unreachable': 2,// 禁止在 finally 语句块中出现控制流语句'no-unsafe-finally': 2,// 强制在块之前使用一致的空格'space-before-blocks': [2, 'always'],// 强制在 function的左括号之前使用一致的空格'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'],// 强制在大括号中使用一致的空格'object-curly-spacing': [2, 'always', {objectsInObjects: false}],// 强制数组方括号中使用一致的空格'array-bracket-spacing': [2, 'never'],// 禁止块语句和类的开始或末尾有空行'padded-blocks': [2, 'never'],// 强制函数中的变量要么一起声明要么分开声明'one-var': [2, {'initialized': 'never'}],// 强制操作符使用一致的换行符'operator-linebreak': [2, 'after', {'overrides': {'?': 'before',':': 'before'}}],// 禁止属性前有空白'no-whitespace-before-property': 2,// 强制 getter 和 setter 在对象中成对出现'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'],// 要求或禁止文件末尾存在空行'eol-last': 2,// 强制在点号之前和之后一致的换行'dot-location': [2, 'property'],// 要求使用 === 和 !=='eqeqeq': [2, 'allow-null'],// 强制在对象字面量的属性中键和值之间使用一致的间距'key-spacing': [2, {'beforeColon': false,'afterColon': true}],// 强制在关键字前后使用一致的空格'keyword-spacing': [2, {'before': true,'after': true}],// 强制第一个属性的位置(属性换行)'vue/first-attribute-linebreak': [2, {// 单行时,第一属性前不允许使用换行符singleline: 'beside',// 多行时,第一属性前必须使用换行符multiline: 'below'}],// 强制第一个属性的位置(属性换行)'vue/first-attribute-linebreak': [2, {// 单行时,第一属性前不允许使用换行符singleline: 'beside',// 多行时,第一属性前必须使用换行符multiline: 'below'}],// 在单行元素的内容之前和之后不需要换行符'vue/singleline-html-element-content-newline': 0,// 关闭组件命名规则校验'vue/multi-word-component-names': 0,// 在computed properties中禁用异步actions'vue/no-async-in-computed-properties': 'error',// 不允许重复的keys'vue/no-dupe-keys': 'error',// 不允许重复的attributes'vue/no-duplicate-attributes': 'warn',// 在 <template> 标签下不允许解析错误'vue/no-parsing-error': ['error', {'x-invalid-end-tag': false}],// 不允许覆盖保留关键字'vue/no-reserved-keys': 'error',// 强制data必须是一个带返回值的函数// 'vue/no-shared-component-data': 'error',// 不允许在computed properties中出现副作用。'vue/no-side-effects-in-computed-properties': 'error',// <template>不允许key属性'vue/no-template-key': 'warn',// 在 <textarea> 中不允许mustaches'vue/no-textarea-mustache': 'error',// 不允许在v-for或者范围内的属性出现未使用的变量定义'vue/no-unused-vars': 'warn',// <component>标签需要v-bind:is属性'vue/require-component-is': 'error',// render 函数必须有一个返回值'vue/require-render-return': 'error',// 保证 v-bind:key 和 v-for 指令成对出现'vue/require-v-for-key': 'error',// 检查默认的prop值是否有效'vue/require-valid-default-prop': 'error',// 保证computed属性中有return语句 'vue/return-in-computed-property': 'error',// 强制校验 template 根节点'vue/valid-template-root': 'error',// 强制校验 v-bind 指令'vue/valid-v-bind': 'error',// 强制校验 v-cloak 指令'vue/valid-v-cloak': 'error',// 强制校验 v-else-if 指令'vue/valid-v-else-if': 'error',// 强制校验 v-else 指令 'vue/valid-v-else': 'error',// 强制校验 v-for 指令'vue/valid-v-for': 'error',// 强制校验 v-html 指令'vue/valid-v-html': 'error',// 强制校验 v-if 指令'vue/valid-v-if': 'error',// 强制校验 v-model 指令'vue/valid-v-model': 'error',// 强制校验 v-on 指令'vue/valid-v-on': 'error',// 强制校验 v-once 指令'vue/valid-v-once': 'error',// 强制校验 v-pre 指令'vue/valid-v-pre': 'error',// 强制校验 v-show 指令'vue/valid-v-show': 'error',// 强制校验 v-text 指令'vue/valid-v-text': 'error','vue/comment-directive': 0}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis在生产环境中可能遇到的问题与解决方案(三)

11. Redis高可用问题 问题描述 在Redis集群中&#xff0c;当主节点发生故障时&#xff0c;需要快速切换到备用主节点&#xff0c;确保系统高可用。 解决方案 Redis Sentinel&#xff1a; 使用Redis Sentinel进行主从节点的监控和自动故障转移。 备用主节点&#xff1a; 配置…

HarmonyOS应用模型概述

应用模型的构成要素 应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼&#xff0c;它提供了应用程序必备的组件和运行机制。有了应用模型&#xff0c;开发者可以基于一套统一的模型进行应用开发&#xff0c;使应用开发更简单、高效。 HarmonyOS应用模型的构成要…

leetcode:2859. 计算 K 置位下标对应元素的和(python3解法)

难度&#xff1a;简单 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 请你用整数形式返回 nums 中的特定元素之 和 &#xff0c;这些特定元素满足&#xff1a;其对应下标的二进制表示中恰存在 k 个置位。 整数的二进制表示中的 1 就是这个整数的 置位 。 例如&#xf…

Vulnhub靶机:FunBox 7

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;FunBox 7&#xff08;10.0.2.34&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/funb…

Ubuntu apt update提示:GPG 缺少公钥解决方法

Ubuntu 运行: sudo apt update #or sudo apt-get update提示&#xff1a;GPG 缺少公钥以及404 Not Found&#xff0c;如下面所示&#xff0c;有mirror.bwbot.org 和ppa.launchpadcontent.net两个源出现问题。 好多网友用后面的方法解决 真正解决&#xff1a;gpg --verify sig:…

C++ 新特性 | C++ 11 | std::forward、万能引用与完美转发

文章目录 一、std::forward、万能引用与完美转发1、万能引用2、类型推导3、引用折叠4、std::forward 概述 std::forward是C11中引入的一个函数模板&#xff0c;用于实现完美转发。它的作用是根据传入的参数&#xff0c;决定将参数以左值引用还是右值引用的方式进行转发。 传统上…

Redis在生产环境中可能遇到的问题与解决方案(六)

26. Redis与微服务架构集成问题 问题描述 在微服务架构中&#xff0c;将 Redis 作为微服务之间的共享缓存时&#xff0c;可能遇到服务发现、动态配置等问题。 解决方案 服务注册与发现&#xff1a; 使用服务注册与发现工具确保微服务能够发现 Redis 实例。 动态配置&#x…

977.有序数组的平方(力扣LeetCode)

文章目录 977.有序数组的平方题目描述快速排序归并排序 977.有序数组的平方 题目描述 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0…

vue超链接传值、查看页面以及父子传值

<el-table-column label"电表编码" align"center" width"120" prop"electricalNum" ><template slot-scope"scope"><div style"text-align: left"><router-link :to"/equipment/electr…

深度学习(6)---Transformer

文章目录 一、介绍二、架构2.1 Multi-head Attention2.2 Encoder(编码器)2.3 Decoder(解码器) 三、Encoder和Decoder之间的传递四、Training五、其他介绍5.1 Copy Mechanism5.2 Beam Search 一、介绍 1. Transformer是一个Seq2Seq&#xff08;Sequence-to-Sequence&#xff09;…

mapstruct自定义转换,怎样将String转化为List

源码&#xff1a;https://gitee.com/cao_wen_bin/test 最近在公司遇到了这样一个为题&#xff0c;前端传过来的是一个List<Manager>,往数据库中保存到时候是String&#xff0c;这个String使用谷歌的json转化器。 当查询的时候在将这个数据库中String的数据以List<Mana…

【知识---如何创建 GitHub 个人访问令牌】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言登录到 GitHub 帐户。在右上角的头像旁边&#xff0c;点击用户名&#xff0c;然后选择 "Settings"。在左侧导航栏中&#xff0c;选择 "Develope…

Mysql索引相关学习笔记:B+ Tree、索引分类、索引优化、索引失效场景及其他常见面试题

前言 索引是Mysql中常用到的一个功能&#xff0c;可以大大加快查询速度&#xff0c;同时面试中也是经常碰到。本文是学习Mysql索引的归纳总结。 索引采用的数据结构——B 树 本部分主要是参考自小林Coding B树的由来 二分查找可以每次缩减一半&#xff0c;从而提高查找效率…

对话框与多窗体设计 —— 标准对话框

三、对话框与多窗体设计3.1 标准对话框3.1.1 QFileDialog对话框3.1.2 QColorDialog对话框3.1.3 QFontDialog对话框3.1.4 QInputDialog标准输入对话框3.1.5 QMessageBox消息对话框 三、对话框与多窗体设计 一个完整的应用程序设计中&#xff0c;不可避免地会涉及多个窗 体、对框…

vue---打印本地当前时间Demo

<template><view class"content" tap"getCurrentTime()">打印时间</view> </template><script>export default {data() {return {title: Hello}},onLoad() {},methods: {getCurrentTime() {//获取当前时间并打印var _this …

论文写作之十个问题

前言 最近进入瓶颈&#xff1f; 改论文&#xff0c;改到有些抑郁了 总是不对&#xff0c;总是被打回 好的写作&#xff0c;让人一看就清楚明白非常重要 郁闷时候看看大佬们怎么说的 沈向洋、华刚&#xff1a;读科研论文的三个层次、四个阶段与十个问题 十问 What is the pro…

springboot127基于Springboot技术的实验室管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

vue 跨域XMLHttpRequest

vue 跨域 使用XMLHttpRequest 亲测好使 let urlhttp://127.0.0.1:9000/pssnotifyyb?b1//urlhttps://api.j4u.ink/v1/store/other/proxy/remote/moyu.jsonvar xhrnew XMLHttpRequest()xhr.open(GET,url,true)//第三个参数是是否异步请求,默认true xhr.onreadystatec…

Elasticsearch内核解析 - 数据模型篇

Elasticsearch内核解析 - 数据模型篇 - 知乎 Elasticsearch是一个实时的分布式搜索和分析引擎&#xff0c;它可以帮助我们用很快的速度去处理大规模数据&#xff0c;可以用于全文检索、结构化检索、推荐、分析以及统计聚合等多种场景。 Elasticsearch是一个建立在全文搜索引擎…