通过vue-cli初始化uniapp项目，支持HBuilderX与cli启动

环境安装

全局安装 vue-cli 脚手架，如果你本地已经安装可以跳过。

npm install -g @vue/cli@4

初始化项目

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

如果遇上如此报错：可以先上 github 上下载压缩包。然后把 dcloudio/uni-preset-vue 替换成你本地下载下来的压缩包路径：

vue create -p D:\self\spinach\test\uni-preset-vue-master school-mobile

执行完命令后，此时会让你选择项目模板：

注意，Vue3/Vite 版本并没有在模块列表内，目前只支持创建默认模板，如果你想要使用 Vue3/Vite 版本，可以单独执行以下命令创建：

创建以 Javascript 开发的工程

npx degit dcloudio/uni-preset-vue#vite projectName

创建以 Typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts projectName

安装eslint

eslint 核心库

npm install eslint babel-eslint eslint-plugin-vue -D

eslint 其他配置库

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

新建 eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  globals: {
    uni: "readonly",
    wx: "readonly",
  },
  extends: ["eslint:recommended", "plugin:vue/essential"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    /* 使用单引号 */
    quotes: ["error", "single"],
  },
  root: true,
  extends: ["eslint:recommended", "plugin:vue/essential", "@vue/standard"],
}

安装sass

Uniapp 默认是使用 sass 预处理器的，如果你使用 vue-cli 创建项目，则需要手动安装 sass；而如果你是通过 HBuilderX 创建项目并启动项目的，一般就不需要再次安装了，但前提是你的 HBuilderX 编辑器已经安装过 sass 插件才行。

安装 sass

npm i sass -D

安装 sass-loader

npm i sass-loader@10.1.1 -D

注意，如果 node 版本小于 16 ，sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12 (opens new window)；如果 node 版本大于 16 ， sass-loader 建议使用 v8.x 版本

安装uni-ui库

uni-ui 库是 Uniapp 官方推出的一个跨端UI库，它是基于 vue 组件的、flex 布局的、无 dom 的跨全端UI框架。uni-ui 不包括基础组件，它是基础组件的补充。

安装 uni-ui

npm i @dcloudio/uni-ui

配置 easycom

uni-ui 现在只推荐使用 easycom ，如自己手动引用组件，可能会出现组件找不到的问题。

// pages.json
{
  pages:[
    // ...
  ],
  "easycom": {
      "autoscan": true,
      "custom": {
        "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
      }
  }
}

配置 vue.config.js

使用 npm 安装的 uni-ui，默认情况下 babel-loader 会忽略所有 node_modules 中的文件，导致条件编译失效，需要通过配置 vue.config.js 解决：

// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
   transpileDependencies: ['@dcloudio/uni-ui']
}

注意，uni-ui 不支持使用 Vue.use() 的方式安装。

安装weapp-cookie

小程序原生的 request 网络请求接口并不支持传统的 Cookie，但有时候我们现有的后端接口确要依赖 Cookie，这个时候我们可以安装 weapp-cookie 库，可以让小程序支持 Cookie

npm i weapp-cookie

引入使用：

// main.js
import 'weapp-cookie';

配置disableHostCheck

当你使用 Uniapp 开发H5时，正常配置服务端代理后，启动项目，却不停的提示

Invalid Host header

这个时候你可以在 manifest.json 文件配置 disableHostCheck 属性来解决：

...
"h5": { 
    "router": { "mode": "hash" }, 
    "devServer": { 
        "https": false,
        "port": 8080,
        "disableHostCheck": true // 解决 Invalid Host header 报错
    },
    publicPath: "./"
}

或者也可以在 vue.config.js 中添加配置：

module.exports = {
    transpileDependencies:['@dcloudio/uni-ui'],
    devServer: {
        disableHostCheck: true
    }
}

安装vant库

后面补上。

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。