这是一篇基础的vue项目创建文章，记得先安装node.js

创建vue项目

1.安装vue

npm install vue

2.安装vue-cli

npm install -g @vue/cli

3.创建项目

vue create 项目名称，可以看到如图所示，选择vue的版本

这里我们选择vue3

选择yarn后就算创建成功了

4.vite创建项目

以上创建项目都是基于webpack搭建的，webpack项目文件过多后会导致编译的速度越来越慢，像我这种不想加班的人，怎么能让编译速度影响我下班～

为什么选择vite，就一个字快 vitejs.cn/guide/ 官网在这里

vite创建项目

npm init @vitejs/app 项目名称

这里如果选择vue项目，默认安装vue3

5.项目路由搭建

安装路由 yarn add vue-router@4

在src目录下创建router.js文件

const HelloWorld = () => import('@/components/HelloWorld.vue');
const zyj = () => import('@/components/zyj.vue')
const routes = [
    {
        path: '/',
        component: zyj
    },
    {
        path: '/home',
        component: HelloWorld,
    },
];
const router = createRouter({
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
});
export default router;

main.js或者main.ts中注册router

import { createApp } from 'vue';
import APP from './App.vue';
import router from './router/router';
const app = createApp(APP);
app.use(router)
app.mount('#app')

tips:设置路径别名 vite.config.js

import { defineConfig } from 'vite';
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

vue项目的创建