黄孟
984036682c
- 新增移动端样式文件，优化小屏幕布局和交互- 在 HomePage 组件中添加移动端导航栏和搜索功能 - 修改 App.vue 以适应移动端布局- 更新 package.json 中的依赖版本 - 新增移动优先设计文档
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import { createApp } from 'vue'
|
|
import './assets/styles/global.css'
|
|
import './assets/styles/mobile.css'
|
|
import App from './App.vue'
|
|
import router from './router/'
|
|
import ElementPlus from 'element-plus'
|
|
import 'element-plus/dist/index.css'
|
|
import { createPinia } from 'pinia'
|
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
|
|
|
// 1. 导入编辑器和预览组件
|
|
import VMdEditor from '@kangc/v-md-editor'
|
|
import VMdPreview from '@kangc/v-md-editor/lib/preview'
|
|
|
|
// 2. 导入基础样式
|
|
import '@kangc/v-md-editor/lib/style/base-editor.css'
|
|
import '@kangc/v-md-editor/lib/style/preview.css'
|
|
|
|
// 3. 导入主题和样式
|
|
import githubTheme from '@kangc/v-md-editor/lib/theme/github'
|
|
import '@kangc/v-md-editor/lib/theme/style/github.css'
|
|
|
|
// 4. 导入复制代码插件及其样式
|
|
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
|
|
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'
|
|
|
|
// 5. 导入高亮库
|
|
import hljs from 'highlight.js'
|
|
|
|
const app = createApp(App)
|
|
const pinia = createPinia()
|
|
pinia.use(piniaPluginPersistedstate)
|
|
|
|
// 6. 配置编辑器
|
|
VMdEditor.use(githubTheme, {
|
|
Hljs: hljs,
|
|
})
|
|
|
|
// 7. 配置预览组件
|
|
VMdPreview.use(githubTheme, {
|
|
Hljs: hljs,
|
|
})
|
|
|
|
// 8. 为编辑器和预览分别添加复制插件
|
|
VMdEditor.use(createCopyCodePlugin())
|
|
VMdPreview.use(createCopyCodePlugin()) // 注意这里使用同一个插件创建函数
|
|
|
|
// 9. 注册组件
|
|
app.use(VMdEditor)
|
|
app.use(VMdPreview)
|
|
|
|
// 10. 使用Element Plus和路由
|
|
app.use(ElementPlus)
|
|
app.use(router)
|
|
app.use(pinia)
|
|
|
|
app.mount('#app') |