uni-app vue3 ts pinia axios router 搭建移动端H5

guduadmin311月前

1.创建项目

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

命令最后空格加项目名

创建可能会出现报错情况

uni-app vue3 ts pinia axios router 搭建移动端H5,在这里插入图片描述,第1张

这种直接到gitee 下载源码就行

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

TS 类型校验

安装类型声明文件

npm i -D miniprogram-api-typings @uni-helper/uni-app-types

配置 tsconfig.json 参考

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    // 类型声明文件
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"], 
    "experimentalRuntimeMode": "runtime-uni-app" 
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

打开代码会发现 manifest.json 和 pages.json 会出现报错原因是不能有注释

解决办法：在 settings.json 中添加以下代码

"files.associations": {
    "pages.json": "jsonc",
    "manifest.json": "jsonc",
  },

uni-app vue3 ts pinia axios router 搭建移动端H5,在这里插入图片描述,第2张

2. ui组件库(vant-ui)引用（官网）

vant4官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/home#lian-jie

安装vant4

# Vue 3 项目，安装最新版 Vant
npm i vant

组件按需引入配置

1.安装插件

# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components -D
# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components -D
# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components -D

2.配置插件

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

如果是基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：

const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

如果是基于 webpack 的项目，在 webpack.config.js 文件中配置插件：

const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
  plugins: [
    ComponentsPlugin({
      resolvers: [VantResolver()],
    }),
  ],
};

3.使用组件

有vant4 效果说明成功

uni-app vue3 ts pinia axios router 搭建移动端H5,
,第3张

3. Pinia 持久化 (官网)

使用方法

List itemdefineStore( ) 方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。
defineStore( ) 方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
state 属性：用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。

actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

import { defineStore } from 'pinia'
export const mainStore = defineStore("名称（唯一）", {
    state:() => { 
        return {
        } 
    },
    getters: {
    },
    actions: {
    }
})

1.安装

npm i pinia

2.配置mian.ts

import { createPinia } from 'pinia'
  app.use(createPinia())

3.在src中创建stores 文件夹和index.ts

import useMemberStore from './modules/user'
 
export default function useStore() {
  return {
    user: useMemberStore(),
  }
}

4.在stores中创建modules文件夹创建user.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 定义 Store
 const useMemberStore = defineStore(
  'user',
  () => {
    // 用户信息
    const userfile = ref()
    // 保存用户信息，登录时使用
    const setProfile = (val: any) => {
        userfile.value = val
    }
    // 清理用户信息，退出时使用
    const clearProfile = () => {
        userfile.value = undefined
    }
    // 记得 return
    return {
        userfile,
      setProfile,
      clearProfile,
    }
  }
)
export default useMemberStore

遇到问题：

uni-app vue3 ts pinia axios router 搭建移动端H5,在这里插入图片描述,第4张

这种情况需要pinia 降级降为：2.0.36 有效 vue 版本：3.3.4

测试：

4.Router（插件说明）路由配置

1.安装(需要跨平台可以用uni-app自带路由或者安装router跨平台插件，这里只做H5配置)

npm install uni-mini-router --save
npm install uni-parse-pages --save

2.配置

项目src目录下（HbuilderX创建的项目可以在根目录下）创建router文件夹，并在该文件夹创建index.ts

//index.ts
import { createRouter } from 'uni-mini-router'
// 导入pages.json
import pagesJson from '../pages.json'
// 引入uni-parse-pages
import pagesJsonToRoutes from 'uni-parse-pages'
// 生成路由表
const routes = pagesJsonToRoutes(pagesJson)
const router = createRouter({
  routes: [...routes] // 路由表信息
})
export default router

配置main.ts

import { createSSRApp } from "vue";
import pinia from './stores'
import App from "./App.vue";
import router from './router'  
export function createApp() {
  const app = createSSRApp(App);
  app.use(pinia)
  app.use(router)  
  return {
    app,
  };
}

配置pages.json

{
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "name": "home",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#E7F0FF"
      }
    },
    {
      "path": "pages/login/login",
      "name": "login",
      "style": {
        "navigationBarTitleText": "登录",
        "navigationBarBackgroundColor": "#E7F0FF"
      }
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "style": {
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#E7F0FF"
      }
    }
  ],
  "tabBar": {
    "color": "#333",
    "selectedColor": "#27ba9b",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabs/home_default.png",
        "selectedIconPath": "static/tabs/home_selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "static/tabs/user_default.png",
        "selectedIconPath": "static/tabs/user_selected.png",
        "text": "我的"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

页面测试：

// pages/index/index.vue

点击按钮出现如图则成功

uni-app vue3 ts pinia axios router 搭建移动端H5,在这里插入图片描述,第7张

6.Eslint（官网）

1.安装

uni-app vue3 ts pinia axios router 搭建移动端H5,在这里插入图片描述,第8张

npm i eslint -D
npm i eslint-plugin-vue -D

2.在根目录创建.eslintrc.js

module.exports = {
    //此项是用来告诉eslint找当前配置文件不能往父级查找
    root: true,
    //指定eslint继承的模板
    extends: ["plugin:vue/essential", "@vue/standard"],
    //此项指定环境的全局变量，下面的配置指定为浏览器环境
    env: {
      browser: true
    },
    // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
    plugins: ["vue"],
    //指定javaScript语言类型和风格
    parserOptions: {
      parser: "babel-eslint"
    },
    //规则https://www.wenjiangs.com/docs/eslint，vue规则：https://eslint.vuejs.org/rules/
    // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
    // "off" -> 0 关闭规则
    // "warn" -> 1 开启警告规则
    //"error" -> 2 开启错误规则
    rules: {
      // 使用 === 替代 == allow-null允许null和undefined== [2, "allow-null"]
      eqeqeq: 0,
      // 双峰驼命名格式
      camelcase: 0,
      //要求或者禁止Yoda条件
      yoda: 2,
      // 行尾不使用分号
      semi: 0,
      //强制一致地使用反引号、双引号或单引号。
      quotes: 2,
      //强制函数中的变量在一起声明或分开声明
      "one-var": 2,
      // 禁用 console
      "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
      // 强制 generator 函数中 * 号周围使用一致的空格
      "generator-star-spacing": "off",
      // 禁用 debugger
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
      // 禁止对象字面量中出现重复的 key
      "no-dupe-keys": 2,
      // 函数参数不能重复
      "no-dupe-args": 2,
      // 禁止重复的函数声明
      "no-func-assign": 2,
      // 禁止重复的 case 标签
      "no-duplicate-case": 2,
      // 禁用未声明的变量
      "no-undef": 1,
      //禁止出现多个空格
      "no-multi-spaces": 2,
      // 不允许标签与变量同名
      "no-label-var": 2,
      //禁止tab
      "no-tabs": 1,
      // 禁止 var 声明 与外层作用域的变量同名
      "no-shadow": 0,
      // 禁止 if 语句中有 return 之后有 else
      "no-else-return": 0,
      // 禁止出现空函数.如果一个函数包含了一条注释，它将不会被认为有问题。
      "no-empty-function": 1,
      // 禁止出现未使用过的变量
      "no-unused-vars": 1,
      //禁止在返回语句中赋值
      "no-return-assign": 0,
      // 禁用行尾空格
      "no-trailing-spaces": 2,
      // 禁止修改 const 声明的变量
      "no-const-assign": 2,
      // 禁止类成员中出现重复的名称
      "no-dupe-class-members": 2,
      //禁止使用alert confirm promp
      "no-alert": process.env.NODE_ENV === "production" ? "error" : "off",
      //禁止多余的冒号
      "no-extra-semi": 2,
      //禁止在条件中使用常量表达式
      "no-constant-condition": 2,
      //空行最多不能超过2行
      "no-multiple-empty-lines": [1, { max: 2 }],
      //禁止无用的表达式
      "no-unused-expressions": 1,
      //禁用不必要的嵌套块
      "no-lone-blocks": 2,
      //不允许使用逗号操作符
      "no-sequences": 2,
      //禁止不规则的空白
      "no-irregular-whitespace": 2,
      //函数括号前的空格
      "space-before-function-paren": 0,
      //处理回调错误
      "handle-callback-err": 1,
      //首选承诺拒绝错误
      "prefer-promise-reject-errors": 0,
      //要求或禁止在注释前有空白 (space 或 tab)
      "spaced-comment": 1,
      //强制关键字周围空格的一致性
      "keyword-spacing": 1,
      //强制在花括号中使用一致的空格
      "object-curly-spacing": 1,
      // 控制逗号前后的空格
      "comma-spacing": [
        2,
        {
          before: false,
          after: true
        }
      ],
      // 要求或禁止 var 声明语句后有一行空行
      "newline-after-var": 0,
      //强制使用一致的缩进
      indent: 0,
      // html 内 缩进
      "vue/html-indent": 0,
      // 插值两端必须留一个空格
      "vue/mustache-interpolation-spacing": 0,
      //强制每行的最大属性数
      "vue/max-attributes-per-line": 0,
      //vue/属性顺序
      "vue/attributes-order": 0,
      // 强制要求在对象字面量的属性中键和值之间使用一致的间距 "var obj = { "foo": 42 };"
      "key-spacing": 0,
      // 禁止末尾逗号
      "comma-dangle": 0,
      // 强制在块之前使用一致的空格 "function a() {}"
      "space-before-blocks": 0,
      // 要求操作符周围有空格 "a ? b : c"
      "space-infix-ops": 2,
      // "() => {};" // 强制箭头函数前后使用一致的空格
      "arrow-spacing": 2,
      //插值中强制统一间距
      //强制组件中的属性顺序
      "vue/order-in-components": 0,
      //不允许字段名称重复
      "vue/no-dupe-keys": 2,
      //多次引用同个包
      "import/no-duplicates": 2,
      //执行有效v-for指令
      "vue/valid-v-for": 2,
      //V-bind:key使用v-for指令要求
      "vue/require-v-for-key": 2,
      //不允许解析错误

uni-app vue3 ts pinia axios router 搭建移动端H5

1.创建项目

2. ui组件库(vant-ui)引用（官网）

3. Pinia 持久化 (官网)

4.Router（插件说明）路由配置

6.Eslint（官网）

7.权限控制

猜你喜欢

网友评论