访客端项目构建

qq_42816187

已于 2024-10-04 23:50:46 修改

阅读量786

点赞数 20

CC 4.0 BY-SA版权

文章标签： rust 开发语言后端

于 2024-10-04 23:44:24 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42816187/article/details/142709253

创建项目

npm init vite@latest easybbs-front-web

1、vue 2、Customize with create-vue 3、Add TypeScript? » No / Yes NO 4、Add JSX Support? » No / Yes NO 5、Add Vue Router for Single Page Application development? » No / Yes Yes 6、 Add Pinia for state management? » No / Yes No 7、Add Vitest for Unit Testing? » No / Yes No 8、Add an End-to-End Testing Solution? » - Use arrow-keys. Return to submit. No 9、 Add ESLint for code quality? » No / Yes No

cd 到 easybbs-front-web

安装项目所有依赖

npm install @kangc/v-md-editor@next @wangeditor/editor @wangeditor/editor-for-vue@next axios element-plus highlight.js js-md5 sass sass-loader vue-cookies vuex --save

通过安装和配置上述包，你可以为 Vue.js 项目添加强大的功能，包括富文本编辑、Markdown 编辑、状态管理、HTTP 请求处理、UI 组件库、样式预处理、Cookie 操作以及代码语法高亮。确保按照各个包的官方文档进行详细配置，以充分利用它们的功能，并根据项目需求进行自定义调整。

修改基本样式，用sass替代css

修改前

修改后

配置main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//引入cookies
import VueCookies from 'vue-cookies'
//引入element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//我们使用sass 所以这里将base.css 改成base.scss
import './assets/base.scss'
//图标 图标在附件中
import '@/assets/icon/iconfont.css'


const app = createApp(App)


app.use(ElementPlus);
app.config.globalProperties.VueCookies = VueCookies;

app.use(router)

app.mount('#app')

引入icon，替换标题前图标以及标题

icon图标网址在iconfont-阿里巴巴矢量图标库

修改图标

修改标题

最后执行npm run dev

修改App.vue

<template>

</template>

<script setup>

</script>

<style scoped>
</style>

删除src/components里的所有文件

删除views里的所有文件

修改route/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
  ]
})

export default router

配置vite.config.js

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

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    hmr: true,
    port: 3005,
    proxy: {
      "/api": {
        target: "http://localhost:7070",
        changeOrigin: true,
        pathRewrite: {
          "^api": "/api"
        }
      }
    }
  }
})

网址改为http://localhost:3005/

测试项目

在App.vue里使用elbutton组件

<template>
  <el-button type="primary">Primary</el-button>
</template>

<script setup>

</script>

<style scoped>
</style>

成功效果