创建 vite+vue3+ts 移动端项目_vue 3.0 搭建移动端项目

 打开文件夹，地址栏输入cmd

npm init vite@latest vitedemo

选择 vue ，用vscode打开文件夹，下载包

npm i

然后 npm run dev 运行

新增：配置rem

安装px转rem插件

npm i postcss-plugin-px2rem -s
 
npm i autoprefixer
 
// 适配不同尺寸移动端插件
npm i amfe-flexible -s

在 main.ts 中引入 import "lib-flexible/flexible"; 

在根目录下创建 postcss.config.js 配置文件

module.exports = {
    plugins: [
        require("autoprefixer"),
        require("postcss-plugin-px2rem")({
            //rootValue: 19.2, //换算基数，1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: ['font-size', 'border'], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
        }),
    ],
};

如果报错如下

就把 package中的   "type": "module", 删掉，重新运行就好了

安装less

npm i less --save-dev
 
npm i less-loader@7.3.0 --save-dev

安装router插件

npm install vue-router@4 -S

在src目录下新建router文件夹，新建index.js文件，写代码

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
 
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];
 
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

在src目录下新建views文件夹，新建Home.vue和About.vue文件，写代码

<template>
    <div>
        Home
    </div>
</template>

<template>
    <div>
        About
    </div>
</template>

将App.vue文件里的内容替换成下方代码

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

在main.js里引入并使用路由

import { createApp } from 'vue'
import App from './App.vue'
 
//引入路由文件
import router from './router'
 
//使用路由
createApp(App).use(router).mount('#app')

打开reset.css网站CSS Tools: Reset CSS

 在src下的assets文件夹下创建css文件夹，创建文件reset.css文件，将上面箭头里的代码复制粘贴，在App.vue中引入这个css文件

<template>
  <router-view />
</template>
 
<style>
@import "./assets/css/reset.css"
</style>

最后效果如下