官网框架搭建（一）

背景：公司以前的官网极其配套的后台管理系统是有ssm框架搭建的，由于公司有新的需求，原项目不在适合，且原项目不便于维护，故而打算重构官网。

技术：此时官网搭建，我准备采用Vite+TS+Vue3+Element Plus+axios来搭建项目。

理由：Vue3是vue的最新版本，对于掌握vue2的我来说，学习和使用vue3是一个必经路程，而这个项目则刚好可以满足我的需求。同时，TS也是未来前端的方向之一，且和Vue3的契合度较高，故而打算采用Vue3+TS来构建项目。

搭建过程

1. 使用Vite搭建项目，使用命令

npm create vite@latest my-vue-app -- --template vue-ts

my-vue-app是项目名称，可以随意更改

2. 项目创建成功后，需要引入依赖包，包括ElementPlus、axios、less、vue-router。 2.1. 引入Element Plus，使用命令：

npm install element-plus --save

2.2.引入axios，使用命令

npm install axios

2.3.引入less，由于vite与webpack不同，此处只需要引入less，不需要引入less-loader.

npm install less

2.4.引入vue-router

npm install vue-router@4

3. 在src目录下创建router文件夹，并在router文件内创建index.ts文件，index.ts配置如下

import { createRouter, createWebHistory, RouteRecord, RouteRecordRaw } from 'vue-router';
import Home from '@/components/HelloWorld.vue'
export const staticRoutes: Array<RouteRecordRaw> = [
  {
    path:'/',
    name:'home',
    component: () => import('@/view/home/index.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes: staticRoutes
})
export default router

4. 创建全局样式表
5. 配置路径别名@，路径别名@需要同时配置vite.config.ts和tsconfig.json
6. vite.config.ts配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  }
})

7. tsconfig.json配置如下

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

8.main.ts配置

import { createApp } from 'vue'
import '@/assets/styles/yhzl.less'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router'

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