VUE3项目创建

使用vite工具初始化目录

npm init vite@latest

进入工程目录

cd vue3

安装常用库

npm i element-plus axios jsonwebtoken pinia echarts vue-router@4 @types/node

#element-plus: 最流行的VUE3组件库
#axios: 最流行的网络请求工具
#jsonwebtoken: 最流行的用户鉴权组件
#pinia: 最新的全局用户状态管理，相当于vuex5
#echarts: 最流行的图表渲染库
#vue-router@4: VUE的官方路由工具
#@types/node: 在ts中使用nodejs原生方法

修改vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  plugins: [vue()],
});

• 和原装的配置相比，主要是修改默认port为3000，增加了一个别名@，在引用库的时候，就可以用@代替src目录

在src目录下创建layout目录，在layout下创建index.ts

在src目录下创建router目录，在router下创建index.ts，拷贝如下代码

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;