文章简介：vite初始化,vantUI引入,移动端适配，ts问题，vue-router,pinia，css预处理器

【STEP1:开始】项目搭建

  • 1.【vite脚手架出马】，使用vite脚手架构建应用 npm create vite@latest

  • 2.【UI组件库】引入vantUI npm i vant -S -D

    • 【配置Vant按需引入】 npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
    • vantUI组件的按需引入方式可查看vantUI按需引入文档

  • 3.【移动端适配】可参考vantUI移动端适配文档

移动端适配的原理：因为不同的手机屏幕尺寸不同，但是如果用px的话那在不同手机屏幕上表现会不一致。所以解决方案都是将px单位转换为其他单位如 em,rem,viewport(vw/vh)，以保证以当前手机屏幕为参照对象，在各个屏幕尺寸上保证统一的表现。

我个人更习惯使用rem来进行移动端适配，原理就是将px转换成rem，而rem（root-em）的一个单位则是html文档根节点的font-size设置来。如果根节点上font-size为16px，则1rem则为16px。

所以，我们会发现它分为两个步骤，1.将px-换成->rem。 2.给html根节点设置font-size。

  • 3.1:转换rem

    • 安装引入 postcss-pxtorem npm install postcss postcss-pxtorem -S -D
    • 增加postcss 配置;根目录下创建文件 postcss.config.cjs 如果你是JS开发，后缀应该是.js 
      1
      2
      3
      4
      5
      6
      7
      8
      module.exports = {
          plugins: {
          'postcss-pxtorem': {
              rootValue: 37.5,// 如果你的设计稿是750px，则rootValue设置为75即可。
              propList: ['*'],
          },
          },
      };

  • 3.2:设置根节点font-size

    • 安装引入 amfe-flexible npm i -S amfe-flexible
    • 修改 meta-viewport 标签，禁止移动端缩放。在index.html中修改
    1
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    • 导入amfe-flexible ；在src/main.js(ts)中增加引入 import 'amfe-flexible'

【STEP2:扩展】增加全家桶成员

2.1 使用vue-router创建路由

  1. 安装 npm install vue-router@4
  2. 创建文件目录。src目录创建文件夹及文件 /router/index.ts
1
2
3
4
5
6
7
8
9
10
11
// index.ts
import { createWebHistory, createRouter, RouteRecordRaw } from 'vue-router'
const routes:RouteRecordRaw[] = [

]
const router = createRouter({
history: createWebHistory(),
routes,
})

export default router;
  1. main.ts 中引入并use
1
2
3
4
5
6
import router from './router'
const app=createApp(App)
app.use(router)

app.mount('#app')

  1. 修改src/App.vue的template段，引入RouterView和KeepAlive组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup lang="ts">
</script>
<template>
<router-view v-slot="{ Component }">
<transition>
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</transition>
</router-view>
</template>

<style scoped>

</style>

  1. 如果你的路由需要对不同的路由配置是否允许KeepAlive，可以在template中使用v-if判断
1
2
3
4
5
6
7
8
<router-view v-slot="{ Component, route }">
<transition>
  <keep-alive v-if="route.meta.isKeepAlive">
    <component :is="Component" />
  </keep-alive>
  <component v-else :is="Component" />
</transition>
</router-view>

2.2 使用pinia来管理状态

  1. 安装 npm install pinia
  2. 创建文件目录。 src目录创建文件夹及文件 /store/index.ts
1
2
3
import { createPinia } from "pinia";
export const pinia = createPinia();
export default pinia;
  1. main.ts 中引入并use

ps:当然你完全可以在main.js中引入createPina，我单独出来index.ts只是个人习惯

1
2
3
4
import store from './store'
const app=createApp(App)
app.use(router).use(store)
app.mount('#app')

【STEP3:可恶的红色波浪线？】在启动项目后你可能会遇到一些问题。

  • Q1: src/main.ts中红色波浪线警告，找不到模块“./App.vue”或其相应的类型声明。ts(2307)
    解决方法：

    1. step1: 根目录创建文件 vue.d.ts文件

    PS: 扩展.vue文件。声明所有的.vue文件，让他们默认导出一个 DefineComponent类型实例;

    1
    2
    3
    4
    5
    declare module '*.vue' {
        import type { DefineComponent } from 'vue';
        const vueComponent: DefineComponent<{}, {}, any>;
        export default vueComponent;
    }
    1. step2: 在 tsconfig.json中的 include节点增加此文件路径
    1
    "include": ["vue.d.ts","src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],

  • Q2: Module ‘“${youpath}/src/components/HelloWorld.vue”’ has no default export.Vetur(1192)

    解决方法：
    卸载 vscode 扩展 vetur，使用新的扩展 Vue - Official

【STEP4:CSS预处理器】 Less/Sass

在项目中，你可能会更喜欢用 less/sass 编写你的css,因为 vite对css预处理器已经有较好的支持，所以你不需要像以前在webpack的loaders中引入 *ss-loader来显示的引入loaders插件来处理css
但是你必须手动 安装你的css预处理器。（我用的是less）

在*.vue文件中，你只需要给<style>标签增加 lang即可。如：<style lang="less"></style>

1
2
3
4
5
6
7
8
# .scss and .sass 如果你是用sass的话
npm install -D sass

# .less 如果你用的less的话
npm install -D less

# .styl and .stylus  如果你用的是stylus的话
npm install -D stylus

更多前往文档查看：vite-css预处理器

【STEP5:扬帆起航】

npm run dev