打开文件夹,地址栏输入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>