新建vue-element项目

创建vue项目

快速上手 | Vue.js

npm create vue@latest


cd 
npm install
npm run dev

构建生产包：

npm run build

安装Chrome插件：

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

引入element-plus

安装 | Element Plus

cnpm install element-plus --save

安装自动导入依赖：

快速开始 | Element Plus

cnpm install -D unplugin-vue-components unplugin-auto-import

修改 vite.config.ts：

import { fileURLToPath, URL } from 'node:url'


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


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: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

安装icon依赖：

Icon 图标 | Element Plus

cnpm install @element-plus/icons-vue

引入axios

安装：

起步 | Axios 中文文档 | Axios 中文网

cnpm install axios

使用：

TenAPI - 免费提供API服务

import axios from 'axios';


axios.get('https://tenapi.cn/v2/baiduhot')
.then(function (response) {
	// 处理成功情况
	console.log(response.data.data);
})

使用路由vue-router

路由 | Vue.js

入门 | Vue Router

https://chat.openai.com/share/0d94eaf7-03da-49c3-a74a-a930f9936b6c

安装：

cnpm install vue-router

使用：

App.vue

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router';


import upload from './components/upload.vue';
import videos from './components/videos.vue';
import me from './components/me.vue';


const router = createRouter({
  history: createWebHistory(),
  routes: [
	{ path: '/', redirect: '/videos' },
    { path: '/upload', component: upload },
    { path: '/videos', component: videos },
	{ path: '/me', component: me }
  ]
});


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