/my-vue3-app

vue3.2(setup) + ts + vue-router@4 + pinia + vite + axios + vant3

Primary LanguageVue

my-vue3-app

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps: 参考: https://blog.csdn.net/qq_63354840/article/details/127545605

脚手架搭建

npm init vue@latest
Eslint Yes 
Perttier NO

设置新的 ESlint 规则

安装  vite-plugin-eslint  eslint 不通过  vite 报错插件
执行 yarn lint 修复
设置 .vscode  保存修复eslint格式

配置 styleLint 规则

  1. 修改 package.json
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",
  1. 添加 styleLinttrc.js 配置
  2. 设置.vscode/setting.json
  3. 安装低版本 syltelint 插件 v0.87.6
  4. 之后 就实现了 css 保存是自动格式化

添加移动端适配方案

  1. 设置 viewport 在 index.html 中：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2.安装插件

npm install amfe-flexible -S
npm install postcss-pxtorem -D
  1. 配置文件
const postCssPxToRem = require("postcss-pxtorem")
css: {
    postcss: {
        plugins: [
            postCssPxToRem({
                rootValue: 75, // 1rem的大小
                propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
            })
        ]
    },
}
  1. 导入 在 main.js 中引入 amfe-flexible 插件：
import 'amfe-flexible'
  1. 测试 设置宽度 750px 就是整个宽度 因为 rootValue: 75

安装 axios

yarn add axiox

二次封装 utils/request.js

引入 Vant 实现按需加载

官网: https://vant-contrib.gitee.io/vant/#/zh-CN/home

使用初始化 yarn add normalize.css -S