当前位置：首页 > article >正文

uni-app项目搭建(ts+Vue3+pinia+vite)

article 2024/11/19 10:56:14

2024年8月3日
本文为搭建uni-app项目教程，内容有ts+Vue3+vite项目结构创建、pinia持久化存储、ESLint代码检查。成品项目地址如下

https://gitee.com/hong_23/uni-app-project-da-jian.git

typescript:4.9.4
vue:3.4.21
pinia:2.2.0
vite:5.2.8
node:20.1.1

1. 创建uni-app+ts+vite项目

uni-app官网:https://uniapp.dcloud.net.cn/quickstart-cli.html

创建以 typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

若创建失败，直接访问gitee下载模版

https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip

下载完成后安装依赖

npm install

2. pinia配置

安装pinia@2.2.0

pinia官网：https://pinia.vuejs.org/zh/getting-started.html

npm install pinia@2.2.0

如果安装出现报错比如说:Pinia 依赖的 @vue/composition-api 要求 Vue 的版本在 “>= 2.5 < 2.7” 范围内，但实际上你的项目使用的是 Vue 3。对于@vue/composition-api是Vue2版本提供组合式API的插件，Vue3不需要所以碰到这个问题直接强制安装pinia

npm install pinia@2.2.0 --force

安装成功后可用以下命令进行检查，没问题即可下一步

npm list pinia@2.2.0

初始化pinia：在main.ts引入

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'//引入第一点
import App from './App.vue'

export function createApp () {
  const app = createSSRApp(App).use(createPinia())//引入第二点
  return {
    app
  }
}

定义Store：src目录下创建一个stores目录，然后创建一个counter.ts文件，内容为

import {ref} from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore=defineStore('counter',()=>{
    //响应式数据
    const count=ref(0)
    
    //定义方法
    function incerment(){
        count.value++;
    }
    function decerment(){
        count.value--;
    }
    
    //外部可访问
    return{
        count,
        incerment,
        decerment
    }
})

测试刚刚定义的store是否可用:

首先在pages目录下创建一个test目录，然后再test目录下创建一个test.vue，然后导入以下代码

<template>
  <view class="counter">
    <button class="button" @click="store.decerment" type="primary">-</button>
    <input class="input" v-model="store.count" type="text"/>
    <button class="button" @click="store.incerment" type="primary" >+</button>
  </view>
</template>

<script setup>
import { useCounterStore } from '../../stores/counter';
const store=useCounterStore();
console.log(store)
</script>
 
<style scoped>
.counter {
  display: flex;
  padding: 100rpx;
}
 
.input {
  flex: 1;
  height: 96rpx;
  text-align: center;
  border: 2rpx solid #eee;
  box-sizing: border-box;
}
 
.button {
  width: 100rpx;
  margin: 0;
 
  &:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
 
  &:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}
</style>

更新pages.json页面配置

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
                {
                        "path": "pages/index/index",
                        "style": {
                                "navigationBarTitleText": "uni-app"
                        }
                },
                //更新的页面
                {
                        "path": "pages/test/test",
                        "style": {
                                "navigationBarTitleText": "uni-app"
                        }
                }
        ],

之后启动项目在浏览器调到测试页面,就是在原有网址加上

test/test

可看到页面有俩个按钮，点击俩个按钮中间的数字会改变则配置pinia成功。

持久化存储

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

虽然说pinia存储的数据，在切换页面后也不会丢失，但是刷新项目后，数据就会丢失。为了可以持久化存储，可使用pinia-plugin-persistedstate插件，存储在浏览器的storage中

安装pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate

将插件添加到pinia实例上

import { createPinia} from 'pinia'
import piniapluginPersistedstate from 'pinia-plugin-persistedstate'

export function createApp() {
  //创建pinia实例
  const pinia=createPinia();
  //pinia使用插件
  pinia.use(piniapluginPersistedstate);
  //挂载到app上
  const app = createSSRApp(App).use(pinia);
   return {
    app,
  };
}

最后给store加上第三个参数即可完成持久化存储

{
    //网页端
    persist:true
    
    //小程序端
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },
}

5. ESLint代码检查

https://eslint.nodejs.cn/docs/latest/use/configure/configuration-files

安装

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser -D

在根目录下新键.eslintrc.js文件，内容如下

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
      tsx: true
    }
  },
  plugins: ['@typescript-eslint', 'prettier', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.vue'],
      rules: {
        'no-undef': 'off'
      }
    }
  ],
  rules: {
    'no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }],
    '@typescript-eslint/no-unused-vars': 'off',
    'vue/component-name-in-template-casing': [
      'error',
      'kebab-case',
      {
        registeredComponentsOnly: false,
        ignores: []
      }
    ],
    'vue/prop-name-casing': ['error', 'camelCase'],
    'vue/require-v-for-key': 'error',
    'vue/no-use-v-if-with-v-for': [
      'error',
      {
        allowUsingIterationVar: false
      }
    ],
    'vue/v-bind-style': ['error', 'shorthand'],
    'vue/v-on-style': ['error', 'shorthand'],
    'no-useless-escape': 0
  }
}

在根目录创建ESLint忽略文件.eslintignore

node_modules
dist
*.md
*.woff
*.ttf
.vscode
.idea

在根目录创建 .prettierrc 文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "endOfLine": "auto"
}

在根目录创建 .prettierignore 文件

**/*.svg
**/*.ico
package.json
package-lock.json
/dist
.DS_Store
.eslintignore
*.png
.editorconfig
.gitignore
.prettierignore
.eslintcache
*.lock
yarn-error.log
**/node_modules/**

插件推荐

在这里插入图片描述

项目配置信息

"dependencies": {
"@dcloudio/uni-app": "3.0.0-4020420240722002",
"@dcloudio/uni-app-harmony": "3.0.0-4020420240722002",
"@dcloudio/uni-app-plus": "3.0.0-4020420240722002",
"@dcloudio/uni-components": "3.0.0-4020420240722002",
"@dcloudio/uni-h5": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-alipay": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-baidu": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-jd": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-kuaishou": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-lark": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-qq": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-toutiao": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
"@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
"pinia": "^2.2.0",
"pinia-plugin-persistedstate": "^3.2.1",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"@dcloudio/types": "^3.4.8",
"@dcloudio/uni-automator": "3.0.0-4020420240722002",
"@dcloudio/uni-cli-shared": "3.0.0-4020420240722002",
"@dcloudio/uni-stacktracey": "3.0.0-4020420240722002",
"@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"@vue/runtime-core": "^3.4.21",
"@vue/tsconfig": "^0.1.3",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-vue": "^9.27.0",
"typescript": "^4.9.4",
"vite": "5.2.8",
"vue-eslint-parser": "^9.4.3",
"vue-tsc": "^1.0.24"
}

查看全文

http://www.kler.cn/a/399997.html