利用 vite 创建项目，搭建最基本的配置

技术栈：vite + vue.js + vue-router + pinia + typescript + axios + element-plus + echarts + ......

1. 利用 vite 创建项目，搭建最基本的结构

$ npm create vite pc-demo -- --template vue-ts

2.配置vite.config.js配置 ，运行自动打开浏览器

  server:{
    port:6969, //设置端口号
    open:true,//运行后自动打开浏览器
    }

3. 安装 normalize.css 统一进行默认样式初始化

npm i normalize.css

4. 引入路由 vue-router

$ npm i vue-router

src/router/index.ts 创建路由对象:

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

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

export default router

src/main.ts 中引入并使用路由:

import { createApp } from 'vue'

import 'normalize.css'
import router from './router'
import App from './App.vue'

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

5.配置绝对路径 vite.config下

 import path from 'path'
 
 resolve: {
    alias: {
      '@': path.join(__dirname, './src')
    },
  },
  
  //报错安装cnpm  i  @types/node
  
 

6.引入状态管理库

• 安装

$ npm i pinia

• 定义根实例

在 'src/store/index.ts' 中:

import { createPinia } from 'pinia'

const store = createPinia()

export default store

在 'src/main.ts' 中:

import { createApp } from 'vue'

import 'normalize.css'
import router from './router'
import store from './store'

import App from './App.vue'

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

7. 引入 UI 组件库

安装:

$ npm i element-plus

配置自动按需引入，先安装插件:

$ npm install -D unplugin-vue-components unplugin-auto-import

再配置 vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': path.join(__dirname, './src'), // 在引入资源的路径中，使用 @ 别名开头，代表的是项目根目录中的 src 目录的绝对路径
    },
  },
})

国际化配置与主题定制处理

8. 网络请求: axios 二次封装

安装:

$ npm i axios

在 src/utils/request.ts 中:

import axios from 'axios'

// 创建实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
})

// 请求拦截
service.interceptors.request.use(
  config => {
    // 请求头中添加 token 的传递
    const token = ''
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }

    return config
  }
)

// 响应拦截
service.interceptors.response.use(
  response => {
    // status 是 http 状态码
    // data 是后端响应返回的数据，规范格式为 { code, data, message }
    const {status, data: responseData} = response

    if (status >= 200 && status < 300) {
      // 从响应返回的数据中解构使用的值
      const {code, data, message} = responseData
      if (code === 200) {
        return data
      }

      return Promise.reject(new Error(message))
    }
  }
)

export default service

9. 搭建整体布局框架结构

在 element-plus 中利用 Container 布局容器组件，配合 Menu 等一起实现整体布局