环境安装
全局安装 vue-cli 脚手架，如果你本地已经安装可以跳过。
npm install -g @vue/cli@4
初始化项目
vue create -p dcloudio/uni-preset-vue projectName
如果该命令执行错误，并且很久没有升级过 @vue/cli ，可以重新执行一下 npm install -g @vue/cli@4。
如果遇上如此报错：
可以先上 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
创建完项目后，就可以切换都对应文件夹中，执行对应的 npm run xxx 命令跑起来项目了。
如果遇到如下报错：
说明 autoprefixer版本过高 版本过高，可以执行以下命令：
npm i postcss-loader autoprefixer@8.0.0
安装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库
- 安装
vant
npm i @vant/weapp -S --production
- 根目录下创建
wxcomponents文件夹
- 从
node_modules中找到@vant/dist，复制出来，然后更名为vant
- 使用
button组件
<template>
<view>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</view>
</template>
<script>
import vanButton from '@/wxcomponents/vant/button';
export default {
components: { vanButton },
}
</script>
全局注册组件可以放在 pages.json 文件中：
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F4F5F8",
"usingComponents": {
// 在这里进行组件全局注册
"van-popup": "wxcomponents/vant/popup/index"
}
},
当然，也可以直接看看官方文档说明：传送门
至此，本篇文章就写完啦，撒花撒花。
希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。
