vite 移动端项目搭建vue3+ts+vant3

缺乏、安全感 2023-09-25 18:03 128阅读 0赞

#  #

# 初始化项目 #

（使用vite官方模板）,这里使用的是vue-ts版本 [vite官网][vite]

npm create vite@latest my-vue-app -- --template vue-ts

## volar插件安装 ##

vue3对应的语法高亮插件

![a684033cbccf451d9a6d1ba30263ba5d.png][]

安装后会在项目中生成对应的配置文件

![8f33c37c658f442ca02ad35a2aafdca7.png][]

## 配置路径别名 [vite 官方说明][vite 1] ##

vit.config.ts配置

resolve: {
        alias: {
          '@': '/src/'
        }
      },

tsconfig.json增加配置

"compilerOptions": {
    
        "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
        "paths": { // 用于设置模块名到基于baseUrl的路径映射
          "@/*" : ["src/*"]
        }
      },

# eslint配置 #

*  安装eslint插件 [eslint官网][eslint]

npm install eslint --save-dev
    
    npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev // 安装ts对应的eslint插件

*  创建eslintrc,js

module.exports = {
      root: true,
      env: {
        node: true,
      },
      extends: [
        'plugin:vue/vue3-essential', //  Vue3 官方推荐的 ESLint 配置，
        'eslint:recommended',
        '@vue/typescript/recommended',
        '@vue/prettier',
        '@vue/prettier/@typescript-eslint',
      ],
      parserOptions: {
        ecmaVersion: 2020,
      },
      rules: {
        // 在这里添加你的规则
      },
    }

*  vscode中使用eslint, 安装eslint插件，并在vscode的配置文件settings.json中添加以下配置（vue3对应规范）

{
      "vue3snippets.enable-compile-vue-file-on-did-save-code": true,
      "vue3snippets.singleQuote": true,
      "vue3snippets.semi": false,
      "vue3snippets.printWidth": 250,
    }

这样在代码保存的时候， eslint就会自动检查并修复

也可以通过命令去运行eslint

npx eslint src --ext .ts,.tsx,.vue // 其中，src 是需要检查的目录，--ext 参数指定需要检查的文件扩展名。可以根据实际情况修改

也可以添加到package.json中

{
      "scripts": {
        "lint": "eslint src --ext .ts,.tsx,.vue"
      }
    }

# vant #

**安装依赖**

[ vant官网][vant]

npm i vant

## **按需引入组件样式** ##

*  安装依赖

npm i unplugin-vue-components -D

*  配置vite.config.ts

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()],
        }),
      ],
    }

配置完成后，可在组件中直接使用vant组件

## 移动端适配 ##

*  安装依赖 （根据自身项目需求是否配置，这里使用rem适配）[vant 官方推荐适配方案][vant 1]

npm install postcss-pxtorem lib-flexible postcss --save-dev

*  在 vite.config.js 中添加 postcss 插件

import { defineConfig } from 'vite'
    import postCssPxToRem from "postcss-pxtorem"
    
    
    export default defineConfig({
      plugins: [
        vue()
      ],
      css: {
        postcss: {
          plugins: [
            postCssPxToRem({
              rootValue: 75, // 设计稿宽度/10
              propList: ['*'],
              // selectorBlackList: ['html']
            })
          ]
        }
      }
    })

*  在main.js中引入lib-flexible。

import 'lib-flexible'

## 底部安全区适配 ##

Vant 中部分组件提供了 `safe-area-inset-top` 或 `safe-area-inset-bottom` 属性，设置该属性后，即可在对应的机型上开启适配

# Windicss #

**步骤一**：依赖安装 [windicss 官网][windicss]

npm i -D vite-plugin-windicss windicss

**步骤二**：mian.ts 引入样式文件

import 'virtual:windi.css'

**步骤三**： 增加windi.config.ts

module.exports = {
      theme: {
        extend: {
          colors: {
            primary: '#464bff',
          }
        }
      },
      shortcuts: {
        'page-container': 'h-full flex flex-col',
        'cus-text-over': 'whitespace-nowrap overflow-hidden overflow-ellipsis'
      }
    }

### 步骤四：注册插件 ###

import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import WindiCSS from 'vite-plugin-windicss'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue(),  WindiCSS(),],
      resolve: {
        alias: {
          '@': '/src/'
        }
      }
    })

# vue-router #

**步骤一**：安装依赖 [Vue Router 官网][Vue Router]

npm install vue-router@4

**步骤二**： 定义使用

const Home = { template: '<div>Home</div>' }
    const About = { template: '<div>About</div>' }
    
    // 2. 定义一些路由
    // 每个路由都需要映射到一个组件。
    // 我们后面再讨论嵌套路由。
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]
    
    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
      // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
      history: VueRouter.createWebHashHistory(),
      routes, // `routes: routes` 的缩写
    })
    
    // 5. 创建并挂载根实例
    const app = Vue.createApp({})
    //确保 _use_ 路由实例使
    //整个应用支持路由。
    app.use(router)
    
    app.mount('#app')

[vite]: https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
[a684033cbccf451d9a6d1ba30263ba5d.png]: https://img-blog.csdnimg.cn/a684033cbccf451d9a6d1ba30263ba5d.png
[8f33c37c658f442ca02ad35a2aafdca7.png]: https://img-blog.csdnimg.cn/8f33c37c658f442ca02ad35a2aafdca7.png
[vite 1]: https://cn.vitejs.dev/config/shared-options.html#resolve-alias
[eslint]: https://eslint.org/
[vant]: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
[vant 1]: https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage%23rem-bu-ju-gua-pei
[windicss]: https://windicss.org/integrations/vite.html
[Vue Router]: https://router.vuejs.org/zh/guide/