vite从零搭建vue3全家桶+elementPlus

1.vite 搭建项目

安装node.js

node官方下载地址

Node 版本要求
需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装vscode

官方下载地址

vscode下载地址2

下载安装之后 打开vscode安装vetur 和 vue 插件

打开=>vscode=>打开文件夹=>跳转到想要创建项目的文件夹

构建项目

//vue3 为项目名字
npm init @vitejs/app vue3 

Select a framework: 选vue

Select a variant: 这个根据需要，这里我选vue-ts

构建完项目 使用提示的命令可以运行项目

  cd vue3
  npm install
  npm run dev

在package.json中可以看到vue版本

Vue3 在VSCode新建项目报错The template root requires exactly one element.解决方法

配置vite.config.ts 根据项目自行调整

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

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [vue()],
  // 别名
  resolve: {
   
    alias: {
   
      //设置别名
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets')
    }
  },
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  base: './',//打包路径
  // 全局css 
  //   css: {
   
  //     preprocessorOptions: { 
  //       less: {
   
  //       // 全局的scss ，跨域放多个，例如：主题的变量，和一些混合等
  //         additionalData: `@import "./src/style/mixin.less";`,
  //       }
  //     }
  //   },
  // 代理服务
  server: {
   
    port: 4000,//启动端口
    open: true,
    proxy: {
   
      // 第一个代理
      '/api': {
    // 匹配到啥来进行方向代理
        target: 'http://127.0.0.1:8080', // 代理的目标
        rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
      },
    },
  },
})

2.整合路由

安装vue 路由

npm install vue-router@4

main.ts添加路由引用

import {
    createApp } from 'vue'
import App from './App.vue'
const app  = createApp(App)

//加载路由
import router from './router/router.js'
app.use(router)

app.mount('#app')

在src目录下创建router文件夹，创建router.ts或router.js

import {
   
    createRouter,
    createWebHistory
} from 'vue-router'

import router from '../demo/router.vue';

const routes = [{
   
    path: '/demo/router',
    name: 'router',
    component: router}
]
export default createRouter({
   
    history: createWebHistory(),
    routes,
});

在src目录下创建demo文件夹，创建router.vue

<template>
  <span> router demo</span>
</template>

<script lang="ts">
import {
    defineComponent } from 'vue'
export default defineComponent({
   
  name: 'router',
})
</script>

在App.vue中测试路由demo

<template>
 <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的