uniapp项目创建后的基本配置

一、代码风格及规则

1. 全局样式级所有页面样式

（1）自定义样式

全局样式：在app.vue 下引入自定义的css文件或写css样式

页面样式：在app.vue 下写page样式，如下

<style>
	/*自定义的每个页面可直接使用公共css */
	@import 'static/css/uni.css';

	view {
		box-sizing: border-box;
	}

	/*每个页面都会生效的css */
	page {
		/*这里一定要设置，否则小程序会有问题 */
		width: auto;
		padding: 28rpx 18rpx;
		box-sizing: border-box;
		background-color: #EFF2F3;
	}
</style>

（2）引入uniapp 辅助css样式

        地址：uni-scss 辅助样式 - DCloud 插件市场

        使用：直接导入插件，在uni.scss中引入，要放到最上面。

/* 需要放到文件最上面 
* 这里面只是有一些内置的样式
*/
@import '@/uni_modules/uni-scss/variables.scss';

 2. 代码规则配置

（1）引入eslint.js和eslint-plugin-vue插件

  地址：eslint-js - DCloud 插件市场  eslint-plugin-vue - DCloud 插件市场

  使用：开发工具做如下设置

（2）引入eslint.js和eslint-plugin-vue插件

   自定义eslint-js校验规则

//详细配置教程请参考：http://eslint.cn/docs/user-guide/configuring
module.exports = {
	'plugins': [
		'html'
	],
	'parserOptions': {
		'ecmaVersion': 'latest',
		'sourceType': 'module',
		'ecmaFeatures': {
			'jsx': true
		},
		'allowImportExportEverywhere': false
	},
	'rules': {
		'semi': [2, 'never'],
		'semi-spacing': [2, {
			'before': false,
			'after': true
		}],
		'quotes': [2, 'single', {
			'avoidEscape': true,
			'allowTemplateLiterals': true
		}]
	}
}

    自定义elint-vue校验规则

//更详细的配置文档请参考：https://github.com/vuejs/eslint-plugin-vue#gear-configs
module.exports = {
	'extends': 'plugin:vue/base',
	'parserOptions': {
		'ecmaVersion': 'latest',
		'sourceType': 'module'
	},
	'settings': {
		'html/html-extensions': [
			'.erb',
			'.handlebars',
			'.hbs',
			'.htm',
			'.html',
			'.mustache',
			'.nunjucks',
			'.php',
			'.tag',
			'.twig',
			'.wxml',
			'.we',
		]
	},
	'rules': {
		//在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,
		'semi': [2, 'never'],
		'semi-spacing': [2, {
			before: false,
			after: true
		}],
		'quotes': [2, 'single', {
			'avoidEscape': true,
			'allowTemplateLiterals': true
		}]
	}
}

二、配置小程序AppID

 三、初始化.gitignore

# Mac
.DS_Store
**/.DS_Store

# vim/vi
*.swp

# JavaScript
node_modules/
.node_modules/
.eslintcache
unpackage/dist/build/
unpackage/dist/dev/

# python
*.pyc