uniapp的cli项目搭建

2,826 阅读1分钟

项目创建

  • 创建 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