- 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
- 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
发现报错：
{46DD755C-3E1A-4664-85A0-17422E0B80BF}.png
直接复制下面的网址：https://github.com/dcloudio/uni-preset-vue
- 如果是创建
vue3.0 + vite + javascript的uni-app项目，直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue 切换到vite分支下载zip后缀的压缩文件，解压到本地就可以了 - 如果是创建
vue3.0 + vite + typescript的uni-app项目，直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue 切换到vite-ts分支下载zip后缀的压缩文件，解压到本地就可以了。
进入项目 cd my-vue3-project
安装依赖包 npm i
运行项目 npm run dev:mp-weixin
- 安装uni-ui框架
npm i @dcloudio/uni-ui
- 配置按需引入组件
// pages.json
{
// 组件自动导入
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
// …省略
]
}
- 在index.vue 中加入以下代码：
<uni-tag text="标签"></uni-tag>
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
<uni-tag text="标签" @click="bindClick"></uni-tag>
页面上显示出如下则引入uni-ui组件成功：
uni-ui.png
统一代码风格
- 安装 eslint + prettier
npm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig
- 新建 .eslintrc.cjs 文件，添加以下 eslint 配置
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier',
],
// 小程序全局变量
globals: {
uni: true,
wx: true,
WechatMiniprogram: true,
getCurrentPages: true,
getApp: true,
UniApp: true,
UniHelper: true,
App: true,
Page: true,
Component: true,
AnyObject: true,
},
parserOptions: {
ecmaVersion: 'latest',
},
rules: {
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: false,
printWidth: 100,
trailingComma: 'all',
endOfLine: 'auto',
},
],
'vue/multi-word-component-names': ['off'],
'vue/no-setup-props-destructure': ['off'],
'vue/no-deprecated-html-element-is': ['off'],
'@typescript-eslint/no-unused-vars': ['off'],
},
}
- 运行
npm lint
温馨提示
到此，你已完成 eslint + prettier 的配置。
