uniapp的cli项目搭建

项目创建

• 创建 xxx 项目

vue create -p dcloudio/uni-preset-vue xxx

• 选择模板类型

• 进入项目

cd xxx

• 运行项目

npm run dev:mp-weixin

搭建配置项目

• 遇到 JSON schema for the TypeScript compiler's configuration file

解决方案：tsconfig.json

{
  "exclude": [
    ...
    "config"
  ],
}

安装代码提示

yarn add @types/uni-app -D

安装 eslint

• eslint - 校验代码的核心

• babel-eslint => babel 插件，用 babel 解析 js 文件

• eslint-plugin-vue => vue 官方的 eslint 插件

  yarn add eslint babel-eslint eslint-plugin-vue  -D
  

• 安装配置

  yarn add @vue/cli-plugin-eslint @vue/eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-node eslint-plugin-import -D
  

• 配置 eslint【.eslintrc.js】

  module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true
  },
  // 配置js全局变量，因为是uni-app，全局的uni是不需要引入的，还有5+的plus对象
  globals: {
    uni: 'readonly',
    wx: 'readonly',
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  /**
   * "off"    0
   * "warn"   1
   * "error"  2
   */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    /* allow async-await */
    'generator-star-spacing': 'off',
    'no-var': 'error',
    'no-empty': 2,
    'comma-dangle': [2, 'never'],
    /* 多个特性的元素应该分多行撰写，每个特性一行 */
    'vue/max-attributes-per-line': [
      2,
      {
        singleline: 5,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    /* 使用单引号 */
    'quotes': ['error', 'single'],
  },
  root: true,
  extends: ['eslint:recommended', 'plugin:vue/essential', '@vue/standard']
  };
  

配置 prettier

• 配置 【.prettierrc】，配合 vscode 的 prettier 插件

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "none"
}

新增请求库luch-request

yarn add luch-request -S

• vue.config.js

module.exports = {
  transpileDependencies: ['luch-request']
 }

新增路由库uni-simple-router

yarn add uni-simple-router uni-read-pages

• vue.config.js

const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

安装 UI 库

yarn add uview-ui

配置scss

yarn add node-sass sass-loader -D