使用 vite 快速搭建 Vue3 及配置

一、安装Vue3

 npm install vue@next

不使用vue脚手架，所以不安装vue/cli。

安装成功后使用 npm list vue来检查vue版本号 使用vue -V检查会报command not found:vue，因为vue -V是检查vue/cli的版本

二、创建项目

  npm init vite@latest 或 npm create vite //创建项目
  
  cd vite-project //在终端打开项目，或用 WebStorm/VsCode打开
  
  npm install //安装依赖

 vite 官方文档： 开始 | Vite 官方中文文档

npm init vite@latest
或者
yarn create vite
或者
pnpm create vite

端口 8080 更改 8000

package.json 文件里 的 scripts 的 dev 加上  --port 8000 。 例如：

  "scripts": {

    "dev": "vite --port 8000",

    "build": "vite build",

    "preview": "vite preview"

  },

vite process is not defined 报错

可以在  vite.config.js 文件里 的 define 加上 'process.env': {}。 如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {}
  }
})

或者

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': process.env
  }
})

vue3 动态路由传参

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 引用的两种方法
import callPage from "../view/callPage.vue"; // 方法一

//路由数组
const routes = [
    {
        path: "/",
        name: "callPage",
        component: callPage,
        children: []
    },
    {
        path: "/calendarDom/:id",
        name: "calendarDom",
        component: () => import('../view/calendarDom.vue'), // 方法二
        children: []
    }
]

//路由对象
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes //上面的路由数组
})

//导出路由对象，在main.js中引用
export default router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

createApp(App)
    .use(router)
    .use(ElementPlus, {
        locale: zhCn,
    })
    .mount('#app')

// App.vue

<script setup>
</script>

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

<style scoped>
</style>

vite + vue3 配置 less

1. 下载依赖：less、less-loader

npm install less  

npm install less-loader

2. vite.config.js 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
  },
})

3. 实现 less 写法 

  <style lang="less" scoped>
  .home{
    background: deeppink;
    .home_text{
      font-weight: bold;
      font-size: 17px;
    }
  }
  </style>
  

1.下载依赖：less、less-loader标题

2. vite.config.js 配置

3. 实现 less 写法