最新vue3实战开源项目-视频课程售卖系统（1）60+节

很长一段时间自己都没有时间或者时机做一些自己的东西或者和一些志同道合的朋友做属于自己的综合型系统，直到今天才有时间去整理和拿出来这个项目，当然后面还有😄Uniapp / React的项目，主要是小程序和手机端的，希望感兴趣的朋友可以加入。

项目介绍：

#  项目是用于不限于课程或者视频观看和售卖的一个系统

#  包括基础的登录页、忘记密码、修改密码

#  包括基本的购物车，观看历史，最新上架，热卖视频，收藏视频

#  课程有分享和评论功能，分享者会有积分，积分可用于购买课程或者兑换rmb😊

#  系统支持个人上传，设置免费或收费

#  当然还有一些基本的音视频剪辑处理功能

#  最后会引入Ai模型用于方便和快捷满足用户需求

#  迭代...未完

一、项目搭建

npm init vite vue3-video-shop

接下来进入项目，安装依赖

cd vue3-video-shop
  npm install
  npm run dev

二、安装vue-router pinia element-plus

sudo npm i vue-router pinia element-plus

ok，到这里基本的依赖都已经完成，接下来让我们去改造页面

三、路由挂载

新建文件夹router并创建index.ts

import { Router, createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/Home/index.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    }
]
const router: Router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

四、引入Vue3自动加载插件 unplugin-auto-import

export default defineConfig({
...
  plugins: [vue(),
    AutoImport({
    eslintrc:{
         enabled:false,        
      },   
    imports: ['vue', 'vue-router', 'pinia'],
    dts: 'types/auto-imports.d.ts', // 使用typescript，需要指定生成对应的d.ts文件或者设置为true,生成默认导入d.ts文件
    })
  ],
...

五、按需引入element-plus

npm install element-plus --save

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite#

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

 

六、项目配置alias引入别名

 resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }

七、重置样式抹平浏览器差异

推荐新的CSS工具——normalize.css
Normalize.css的作用是保留有用的浏览器默认样式，而不是从每个元素中删除所有默认样式。

 

ok到此，项目的基础已经搭建完毕，剩下来就是去完善里面的布局。

 项目地址：GitHub - vue3-video-shop: vue3 pinia element-plus

后续：

欢迎小伙伴加入交流群，一起提升进阶，用最新的知识，