开发笔记：使用vite搭建vue项目

Vite 需要Node.js版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

vue3不再兼容ie11以下浏览器。

1、运行命令npm init @vitejs/app，按指示输入项目名称，选择使用框架，选择使用脚本，回车项目搭建成功

如不存在vite，需先安装npm create vite@latest按提示操作选择安装, 通过附加的命令行选项直接指定项目名称和使用的模板npm create vite@latest my-vue-app -- --template vue后续按提示操作

2、进入项目，安装依赖，运行命令npm install；

3、运行项目npm run dev,确保项目可以跑起来。

4、扩充vite.config.ts，主要两部分，一部分路径，一个是预加载样式，防止自定义样式变量不生效；

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require("path");//这个方式尝试成功了
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@/": `${path.resolve(__dirname, "src")}/`,
    },
  },
  sourceMap: false,
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/scss/style.scss";', // 添加公共样式
      },
    },
  },
})

5、安装router，运行命令npm install vue-router@4(带版本)，在src目录下新建route文件夹，->index.js

import {createRouter, createWebHistory } from "vue-router";
const routes=[{
    path: "/login",
    name: "Login",
    alias: ["/"],
    component: () => import("@/views/login.vue"),
    meta: { title: "登录" },
}]
const router = createRouter({
    history:createWebHistory(),
    routes,
    scrollBehavior (to, from, savedPosition){
        if(savedPosition){
            return savedPosition
        }else{
            return {x:0,y:0}
        }
    }
})
router.beforeEach((to,from,next)=>{
    //路由守卫处理逻辑
})
export default router;

main.js中引入router

import router from './route/index'

const app=createApp(App);
app.use(router)
app.mount('#app')

6、集成vuex，运行命令npm install vuex@next --save；在src目录下新建store->index.js

使用pinia，不需要可跳过，安装pinia状态管理库

npm install pinia

7、配置打包环境，以测试环境为例

项目下新建.env.dev文件

#测试环境
NODE_ENV=dev
VITE_APP_MODE="development"
VITE_API_BASE_URL=""

修改package.json

"build:test": "vite build --mode dev",

8、安装elementPlus运行命令npm add element-plus，vue3+elementplus为一套（主开发pc，移动端另外考虑） main.js引入

import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import './assets/scss/element-variables.scss'

app.use(ElementPlus,{
 locale:zhCn
});

9、安装axios 运行命令npm add axios，先安装8目的在写axios文件时有弹窗提示，可使用第三方框架自带的弹窗，如ElMessage

手机端：

npm add sass -D

npm install postcss-px-to-viewport -D

//vite.config.js
import pxtovw from 'postcss-px-to-viewport'
css: {
    postcss:{
      plugins:[
        pxtovw({
          unitToConvert: "px",
          viewportWidth: 750,
          unitPrecision: 2,
          propList: ["*"],
          viewportUnit: "vw",
          fontViewportUnit: "vw",
          selectorBlackList: ["wrap"],
          minPixelValue: 1,
          mediaQuery: true,
          replace: true,
          exclude: [/node_modules/],
          landscape: false 
        })
      ]
    },
    // preprocessorOptions: {
    //   scss: {
    //     additionalData: '@import "./src/assets/scss/style.scss";', // 添加公共样式
    //   },
    // },
  },