hammer1010

vue3的那些事

没有特别的幸运，那么就特别的努力！！！

vue3 + vite + ts + vant + axios + sass 移动端h5搭建新项目

vue3 + vite + ts + vant + axios + sass
- 搭建第一个 Vite 项目 (vite + vue + ts)
- 代码规范 (格式化、提示)
- - eslint
  - prettier
  - 配置eslintrc
- 配置 tsconfig
- CSS 预处理器
- - less安装使用
  - sass安装使用
- vant 安装
- - Rem 布局适配
  - 底部适配 - 对于ios系统
- vue-router
- Axios
- - 示例页面
- 项目地址

vue3 + vite + ts + vant + axios + sass

vite官网:

搭建第一个 Vite 项目 (vite + vue + ts)

兼容性注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

// 搭建第一个 Vite 项目 (vite + vue + ts)

// npm (本篇采用npm搭建)
npm init vite@latest 

// yarn
yarn create vite

// pnpm
pnpm create vite

# npm 6.x
npm create vite@latest vite-vue3 --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest vite-vue3 -- --template vue

# yarn
yarn create vite vite-vue3 --template vue

# pnpm
pnpm create vite vite-vue3 --template vue

项目启动


cd vite-vue3

npm install
npm run dev

代码规范 (格式化、提示)

eslint

# 自动生成配置文件并安装下面四个依赖
npx eslint --init

# 或者手动创建文件
# npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue -D

prettier

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

创建prettier文件

// prettier.cjs

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false, // 是否使用tab进行缩进，默认为false
  singleQuote: true, // 是否使用单引号代替双引号，默认为false
  semi: true, // 行尾是否使用分号，默认为true
  arrowParens: 'always',
  endOfLine: 'auto',
  vueIndentScriptAndStyle: true,
  htmlWhitespaceSensitivity: 'strict',
};

配置eslintrc

// eslintrc.cjs

module.exports = {
  root: true, // 停止向上查找父级目录中的配置文件
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier', // eslint-config-prettier 的缩写
  ],
  parser: 'vue-eslint-parser', // 指定要使用的解析器
  // 给解析器传入一些其他的配置参数
  parserOptions: {
    ecmaVersion: 'latest', // 支持的es版本
    parser: '@typescript-eslint/parser',
    sourceType: 'module', // 模块类型，默认为script，我们设置为module
  },
  plugins: ['vue', '@typescript-eslint', 'prettier'], // eslint-plugin- 可以省略
  rules: {
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-var-requires': 'off',
  },
};

配置 tsconfig

// tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    // 是初始化默认配置
    /*
      在ts中导入js模块会报错找不到类型声明
      解决方法一：
        仅设置 "allowJs": true 即可
        注：allowJs设置true时，下方include不可以加入'src/**\/*.js'，否则报错'无法写入文件xx因为它会覆盖输入文件'
      方法二：
        仅在 env.d.ts 中加入 declare module '*.js'; 模块定义即可

      总结：和 "include": ["src/**\/*.js"] 没有任何关系
    */
    "allowJs": true, // 允许编译器编译JS，JSX文件
    "baseUrl": "./",
    // "typeRoots": [
    //   "node_modules/@types" // 默认会从'node_modules/@types'路径去引入声明文件
    // ],
    // "types": ["node"] // 仅引入'node'模块
    // "paths"是相对于"baseUrl"进行解析
    // 在vite.config里配置了路径别名resolve.alias，为了让编译 ts 时也能够解析对应的路径，我们还需要配置 paths 选项
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  // references属性是 TypeScript 3.0 的新特性，允许将 TypeScript 程序拆分结构化(即拆成多个文件，分别配置不同的部分)。
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts", "config/index.ts"]
}

CSS 预处理器

less安装使用

// npm 安装
npm install less
npm install less-loader

// yarn 安装
yarn add less less-loader

// 使用
< style lang="less" scoped></ style>

sass安装使用

// npm 安装
npm install -D sass sass-loader

// yarn 安装
yarn add sass sass-loader

vant 安装

vant3官网地址:
安装

// npm 安装
npm i vant

// yarn 安装
yarn add vant

// 通过 pnpm 安装
pnpm add vant

常规用法

import { createApp } from 'vue'
import './style.css'
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
import App from './App.vue'

const app = createApp(App)

// 3. 注册你需要的组件
app.use(Button);

app.mount('#app');

按需引入组件样式

// 通过 npm 安装
npm i unplugin-vue-components -D

// 通过 yarn 安装
yarn add unplugin-vue-components -D

// 通过 pnpm 安装
pnpm add unplugin-vue-components -D

配置插件
vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

使用组件

<template>
  <van-button type="primary" />
template>

Rem 布局适配

// npm 安装
npm install -D postcss-pxtorem lib-flexible

// yarn 安装
yarn add postcss-pxtorem lib-flexible

根目录下面新建一个 postcss.config.js 文件

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

底部适配 - 对于ios系统


<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>


<van-nav-bar safe-area-inset-top />


<van-number-keyboard safe-area-inset-bottom />

vue-router

1.安装

npm i vue-router@4

2.创建路由

// src/router/index.ts

//现在创建router的方式与vue2.x的版本已经很不同了
import { createRouter, createWebHashHistory } from "vue-router";
import { routes } from "./routes";

const router = createRouter({
  history: createWebHashHistory(), //替代之前的mode，是必须的
  routes,
});

router.beforeEach((to, from, next) => {
  document.title = to.meta.title as string || '浙里普法'
  next()
})
export default router;

// src/router/routes.ts

import { RouteRecordRaw } from "vue-router";
export const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/index",
  },
  {
    path: "/index",
    name: "Index",
    component: () => import("../view/index.vue"),
    meta: {
      nav: true,
      title: '首页'
    }
  },

];

3.挂载路由

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index'; //引入vue-router

const app = createApp(App);

app.use(router); // 挂载到app上
app.mount('#app');

4.使用

<template>
  <router-view />
</template>

Axios