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)

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

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

4. 引入uView基础样式

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

5. 配置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}
}