vite+vue3项目适配

vite官网：https://vitejs.dev/

vite速度非常快，但是比vue-cli脚手架搭建的项目少了好多东西，这意味着ts、router、scss等等都需要自己再重新装。

1.执行 

npm init vite@latest

 按着里面给出的一步步进行操作，搭建项目，勾选vue3下载

2.项目搭建好了，需要手动去安装router、scss、store等

3.适配移动端：

移动端reset.css引入全局：

html {

  color: #333;

  /*规定主色调,依据业务场景(非必须)*/

  background: #f6f6f6;

  /*规定主背景,依据业务场景(非必须)*/

  overflow-y: auto;

  /*如果有溢出自动形成滚动条*/

  -webkit-text-size-adjust: 100%;

  /*不想让iPhone横坚屏切换的时候调节文字*/

  -ms-text-size-adjust: 100%;

}

html * {

  /*所有元素*/

  outline: none;

  -webkit-tap-highlight-color: rgba(

    0,

    0,

    0,

    0

  ); /*去除移动端开发点击事件灰色背景如a标签*/

}

body,

html {

  height: 100%;

}

article,

aside,

blockquote,

body,

button,

code,

dd,

details,

div,

dl,

dt,

fieldset,

figcaption,

figure,

footer,

form,

h1,

h2,

h3,

h4,

h5,

h6,

header,

hgroup,

hr,

input,

legend,

li,

menu,

nav,

ol,

p,

pre,

section,

td,

textarea,

th,

ul {

  margin: 0;

  padding: 0;

}

input,

select,

textarea {

  font-size: 100%;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

fieldset,

img {

  border: none;

}

address,

caption,

cite,

code,

dfn,

em,

th,

var {

  font-style: normal;

  font-weight: 500;

}

ol,

ul {

  list-style: none;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-size: 100%;

  font-weight: 500;

}

q:after,

q:before {

  /*在<q></q>标签之间的文字两头加上引号*/

  content: "";

}

a {

  text-decoration: none;

}

/*input*/

button {

  border: none;

}

button,

html input[type="button"],

input[type="reset"],

input[type="submit"] {

  -webkit-appearance: button; /*渲染成button的风格*/

  text-transform: none;

  outline: none;

}

input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder {

  color: #999; /*输入框提示语的字体样式*/

}

input::-webkit-inner-spin-button {

  /*解决input的type="number"在部分手机端会出现一个小按钮*/

  -webkit-appearance: none; /*去除系统默认appearance的样式,常用于IOS下移除原生样式*/

}

input::-webkit-outer-spin-button {

  /*解决input的type="number"在部分手机端会出现一个小按钮*/

  -webkit-appearance: none;

}

textarea {

  vertical-align: top;

}

button,

input {

  line-height: normal;

}

select {

  margin: 0;

  outline: 0;

}

input.fixAKeyboard:focus,

textarea.fixAndroidKeyboard:focus {

  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  -webkit-user-modify: read-write-plaintext-only;

}

input:-webkit-autofill {

  -webkit-box-shadow: 0 0 0 1000px white inset !important;

}

button,

input[type="button"],

input[type="checkbox"],

input[type="reset"],

input[type="submit"],

label {

  cursor: pointer;

  user-select: none;

  -ms-user-select: none;

  -moz-user-select: none;

  -webkit-user-select: none;

}

input[type="submit"] {

  -webkit-user-modify: read-plaintext-only;

  -moz-user-modify: read-plaintext-only;

  -ms-user-modify: read-plaintext-only;

  -o-user-modify: read-plaintext-only;

  user-modify: read-plaintext-only;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}

input[type="search"] {

  -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  -webkit-appearance: textfield;

}

/*flex box*/

.flex {

  display: box;

  /* OLD - Android 4.4- */

  display: -webkit-box;

  /* OLD - iOS 6-, Safari 3.1-6 */

  display: -moz-box;

  /* OLD - Firefox 19- (buggy but mostly works) */

  display: -ms-flexbox;

  /* TWEENER - IE 10 */

  display: -webkit-flex;

  /* NEW - Chrome */

  display: flex;

  -webkit-box-lines: multiple;

  -webkit-flex-wrap: wrap;

  -moz-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  -o-flex-wrap: wrap;

  flex-wrap: wrap;

}

.justify-between {

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.justify-center {

  -webkit-box-pack: center;

  -webkit-justify-content: center;

  -ms-flex-pack: center;

  justify-content: center;

}

.vertical {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

}

*,

*:before,

*:after {

  box-sizing: border-box; /*所有元素以border开始计算盒子大小*/

}

.clearfix:after,

.clearfix:before {

  /*清除浮动*/

  content: " ";

  display: table;

}

.clearfix:after {

  clear: both;

}

.fl {

  float: left;

}

.fr {

  float: right;

}

4.public 里面配置meta标签

    <meta name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0">

5.比如下载vant  ui库：

安装v3的vant  npm install -g @vue/cli 

安装vant npm i vant@next -S

进阶用法里面使用 vw布局 执行命令 npm install -S postcss-px-to-viewport
 主目录下新建 postcss.config.js 文件夹 配置选项

进行按需导入  执行命令 npm i vite-plugin-style-import -D 可以同步按需导入样式
  并且在 vite.config.ts中配置 import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default { plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], };

做到这这个项目就完成了，你会发现vite速度超级快。