创建一个 TS+Vue3+vite+element-plus 后台管理系统项目（一）

1. 创建项目

这里使用npm命令创建 [vite官网]

npm init vite@latest

按照提示
输入名称 Project name —— vite-app
选择框架 Select a framework —— vue
选择语言 Select a variant —— vue-ts

按照提示cd进入项目 => 按照依赖 => 运行项目

cd vite-app    # 这里的 vite-app 是自己创建的项目名称
npm install
npm run dev

按照提示，浏览器打开此URL（一般为 http://localhost:3000）

得到一个vue3项目的初始页面

2. 安装其他依赖

- 安装 element-plus [element-plus]

npm install element-plus --save

安装完成后，在main.ts文件里引入element-plus，即可在项目中使用。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
  .use(ElementPlus)
  .mount('#app')

- 安装 sass

这里不是安装的node-sass，试着安装过，貌似解析不了scss，会报错，安装sass就没问题！

npm i sass -D

可以在src目录下创建style文件夹，再创建一个common.scss文件，在App.vue里引入，不报错就可以了

// common.scss
.flex {
  display: flex;
  justify-content: center;
  &_align {
    align-items: center;
  }
}

// App.vue
<style lang="scss">
@import url('./style/common.scss');
</style>

- 安装 vue-router [vue-router]

这里安装的是 4.x 版本的vue-router

npm install vue-router@4

安装完成后，在src目录下创建一个router目录，router下再创建一个index.ts文件

import { createRouter, createWebHashHistory } from 'vue-router';
// import interceptor from './interceptor'; // 拦截器
import routes from './routes'; // 路由

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

// interceptor.use(router); // 使用use方法，把router传进拦截器

export default router;

另外还需要在router目录下创建一个routes文件夹，文件夹下再创建一个routes.ts文件，router目录结构如下（可以先不考虑interceptor.ts）

routes.ts文件

import { RouteRecordRaw } from 'vue-router';
declare module 'vue-router' {
  interface RouteMeta {
    // 可选的
    isAdmin?: boolean
    // 每个路由都必须声明
    requiresAuth: boolean
  }
}

// import Login from '../views/login.vue';

const routes: Array<RouteRecordRaw> = [
  // {
  //   path: '/',
  //   name: '',
  //   component: () => import('../../views/login-after.vue'),
  //   meta: { requiresAuth: true },
  // },
  // {
  //   path: '/login',
  //   name: 'login',
  //   component: () => import('../../views/login.vue'),
  //   meta: { requiresAuth: true },
  // },
];

export default routes;

到这里，再把配置好的router文件引入到main.ts文件里就好了(main.ts完整代码)：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
  .use(router)
  .use(ElementPlus)
  .mount('#app')