uniapp 框架搭建及使用

马农码字

已于 2024-01-30 10:38:15 修改

阅读量947

点赞数 3

分类专栏： uniapp 文章标签： uni-app

于 2024-01-25 18:49:39 首次发布

本文链接：https://blog.csdn.net/qq_43384836/article/details/135851234

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

创建uniapp

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

安装导入uview组件库

工具=》插件安装=》插件1：uni_modules(地址：uni_modules插件) ；插件2：“scss/sass编译”；插件3：建议安装”eslint-js“与”eslint-plugin-vue“后续会用到
引入并使用uView的JS库

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

在引入uView的全局SCSS主题文件

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

引入uView基础样式

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

配置easycom组件模式

// pages.json
{
	// 如果您是通过uni_modules形式引入uView，可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

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

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

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

详细文档参考：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
  }
}

每日小结：我们在迈出任何一步时，都要做好最坏的打算，既然迈出了，那就全力以赴，不存在什么后不后悔的，凡是尽力就好！