创建项目：

vite ：中文链接 英文链接

npm init @vitejs/app

选择vue模板 创建项目

一、环境变量设置 （dev,prod）

新建 .env.development  .env.production放在根目录 和vue-cli相同 不过变量名修改为 VITE_APP_XX

页面使用  import.meta.env

 

二、scss css预处理器使用

直接下载npm install sass -D  页面style lang="scss" 即可使用 无需下载node-sass sass-loader等webpack loader

全局配置scss文件变量

新建style/index.scss 

// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$width: 110px;

vite.config.js配置

 css:{
     // 引用全局 scss
     preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/style/index.scss";'
      }
    },
  },

页面使用

<style lang="scss">
#app {
  
  background-color: $red;
  
}
</style>

注意：如使用计算样式 需使用#包裹

<style lang="scss">
#app {
  
  background-color: $red;
  width: calc(100% - #{$width});
}
</style>

三、样式的兼容性添加（autoprefixer postcss）

npm install autoprefixer postcss -D 

新建postcss.config.js 

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

package.json 添加

"browserslist": [
    "> 0.5%",
    "last 2 versions",
    "ie >= 10",
    "iOS >= 8",
    "Android >= 4"
  ]

四：别名修改（1.0>2.0更改）

resolve: {
    //别名
    alias:{
      '/@': path.resolve(__dirname,'./src') //注意 后面/不需要了 
    }
  },

import HelloWorld from '/@/components/HelloWorld.vue'




css使用
background-image: url('/@/assets/logo.png');

五：路由配置 

vue-router4.0中文文档

大改变主要就是

1. 模式的改变

import { createRouter, createWebHistory } from 'vue-router'
//使用组合式来进行创建路由

const router = createRouter({
  history: createWebHistory(),
  //base移除  使用createWebHistory (其他 history 也一样)的第一个参数传递：
  // history: createWebHistory('/dev'),
  routes: [],
})


main.js


app.use(router)

   2. 使用transtion keepalive时写法

 <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </transition>
</router-view>

//使用过渡组件transition时 命名修改
将 .fade-transform-enter 字符串实例替换为 .fade-transform-enter-from
将 .fade-transform-leave 字符串实例替换为 .fade-transform-leave-from

3. 动态添加路由时 addRoutes移除 变成addRoute添加单个对象

//accessRoutes指代路由数组
accessRoutes.forEach((route) => {
     router.addRoute(route)
})

4. 删除通配符 *

import NotFound from '/@/views/404.vue'

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
   
  ],
})

六：vite.config.js中使用环境变量

1. // dotenv 需要单独npm install
   export default ({ mode }) => {
     require('dotenv').config({ path: `./.env.${mode}` });
     // now you can access config with process.env.{configName}
     return defineConfig({
         plugins: [vue()],
         base:process.env.VITE_APP_NAME
     })
   }
   

2. import { loadEnv } from 'vite'
   export default ({ mode }) => {
     return defineConfig({
             plugins: [vue()],
             base:loadEnv(mode, process.cwd()).VITE_APP_NAME
         })
   }

  两种方法可使用，推荐第二种，不需要下载其他插件

七：使用svg 生成雪碧图

推荐使用 vite-plugin-svg-icons gitbub地址

在src目录新建 icons文件夹 导入svg 例：

dir也可存放svg ，新建svgBuilder.js 放在src/plugins 下

import viteSvgIcons from 'vite-plugin-svg-icons'
import path from 'path'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
export default () => {
  return viteSvgIcons({
    // 指定需要缓存的图标文件夹
    iconDirs: [path.resolve(process.cwd(), 'src/icons')],
    // 指定symbolId格式
    symbolId: 'icon-[dir]-[name]'
  })
}

main.ts 注册，生成雪碧图 import 'vite-plugin-svg-icons/register';

vite.config.ts 引入后，写入plugins

import { defineConfig,loadEnv  } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgBuilder from './src/plugins/svgBuilder'


export default ({mode})=>{
    return defineConfig({
    plugins: [vue(),svgBuilder()]]
}

页面使用

src/components新建SvgIcon.vue

<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#eee',
    },
  },
  setup (props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
    return { symbolId };
  },
});
</script>

页面使用时

<template>
  <div>
    <SvgIcon name="404"></SvgIcon>
    <SvgIcon name="bug"></SvgIcon>
    <SvgIcon name="table"></SvgIcon>
    <SvgIcon name="dir-drag"></SvgIcon>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';

import SvgIcon from '../components/SvgIcon.vue';
export default defineComponent({
  components: { SvgIcon },
});
</script>

八：使用scss导出变量

vite自动识别后缀为module模块

https://cn.vitejs.dev/guide/features.html#css-modules

新建test.module.scss

$color-primary: red;

:export {
  color :$color-primary;
}

使用

import test from './style/test.module.scss'
console.log(test)

 

持续更新中。。。