Vite-Ts框架搭建

安装包语法 yarn add <包名> -D
说明: -D是编译的时候使用，生成后不会使用的包

初始版项目

yarn create @vitejs/app my-vue-app --template vue-ts
cd <project-name>
yarn
yarn dev

安装路由并配置

yarn add vue-router@4

1. 新建router文件夹

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'index',
        component: () => import('../pages/index.vue'),
    },
    {
        path: '/example/scrollTop',
        name: 'examplescrollTop',
        component: () => import('../pages/example/scrollTop.vue'),
    }
]

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


export default router

2. 在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)

app
.use(router)
.mount('#app')

安装vant

yarn add vant@3

1. 按需引入vant样式文件设置
   安装vite-plugin-style-import

yarn add vite-plugin-style-import -D

配置vite-plugin-style-import ,在vite.config.ts中引入并添加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),
  ]
})

2. 浏览器适配
   安装amfe-flexible

yarn add amfe-flexible

配置amfe-flexible,在跟目录的index.html入口文件中添加

 <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script src="./node_modules/amfe-flexible/index.js"></script>

安装postcss-pxtorem

yarn add postcss postcss-pxtorem -D

配置postcss-pxtorem,在跟目录新建postcss.config.js文件

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

安装sass

yarn add sass -D