1 Star 0 Fork 13

koalas / by-vue3-blog

forked from Baymax / by-vue3-blog 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

Vue 3个人博客前端介绍

本次去除Element UI,自己编写所需功能组件。编写了导航栏、全局提示、通知提醒框、空状态、无限滚动、按钮、头像、回到顶部、评论、音乐播放器、分页器、滑动条、Markdown预览、图片。其中图片样式来自Element,音乐播放器样式来自APlayer.其余的组件样式来自Ant Design of Vue。 也因为如此!本次前台打包后大小从1.3M降到0.9M左右。去除了注册,登录,用户信息功能!采用第三方登录!全站响应式布局,采用更简洁的设计!统一的设计风格,后台现在升级到Vue 3+Element Plus,添加数据统计。

项目演示

本次重构分为两个部分,(只重构前台,后台升级为Vue 3+Element Plus)

一:编写博客前台所需的功能组件

二:重新设计博客前台及功能

网站首页:https://www.yunmobai.cn/

Vue3前端源码:https://gitee.com/baymaxsjj/by-vue3-blog

Vue3UI组件源码:https://gitee.com/baymaxsjj/by-vue3-ui

Vue2前端源码:https://gitee.com/baymaxsjj/by-vue-blog

项目介绍

Vue版本:3.0.3,Laravel版本:7.0 1.Vue 多页面配置,一个项目包括前后端,

2.采用Element UI编写前后台

3.完成模块:

前台:首页介绍,文章展示,标签展示,分类展示,文章解析,生成目录,运行demo,模块显示,留言评论,友情链接,第三方登录(QQ,GITEE,GITHUB),(登录,注册,找回密码,个人信息已移除)

后台:数据统计,发表文章(模块管理,多平台发布,提交百度收录),文章列表,用户管理,友情链接,项目管理,成长路线,留言管理,网站公告,首页轮播,音乐管理,

4.项目配置:前后台分开打包,按需加载,动态路由,gizp压缩,去除生产环境的console.log,反向代理,cdn引入,服务器自动拉取代码打包编译脚本

安装依赖

npm install

运行项目

//运行网站前台
npm run serve_home
//运行网站后台
npm run serve_admin

打包

//编译网站前台
npm run build_home 
//编译网站后台
npm run build_admin

vue cli配置参考

See Configuration Reference.

前后台分开打包

在package.json中配置

 "scripts": {
        "serve_home": "vue-cli-service serve --home",
        "build_home": "vue-cli-service build --home",
        "serve_admin": "vue-cli-service serve --admin",
        "build_admin": "vue-cli-service build --admin "
    },

在vue.config.js配置

//开发生产环境判断:true为生产环境
const IS_PROD = process.env.NODE_ENV === 'production';
//获取在package.json 编译或运行获取自定义的配置名称
let appName = process.argv.slice(0)[3].replace('--', '');
//编译输出名称
let outputPath = appName === 'home' ? 'home' : 'admin'

多页面配置,

	// 由于部分插件,导致ie下空白
    transpileDependencies: ['vue-savedata', 'vue-baberrage'],
	//运行目录:开发环境:都在根目录。生产环境,前台在根目录,后台在子目录下运行
    publicPath: IS_PROD ? outputPath == 'home' ? '/' : '../' + outputPath + '/' : '/',
	// 输出目录,
    outputDir: '../' + outputPath,
	//多页面配置
    pages: {
		//此处因为要前后台分开打包,所以要注释
        // about: {
        //     entry: 'src/pages/admin/main.js',
        //     template: 'public/admin.html',
        //     filename: 'admin.html',
        //     chunks: ['chunk-vendors', 'chunk-common', 'about'],
        //     title: 'BAYMAX后台管理'
        // },
        index: {
            entry: 'src/pages/' + appName + '/main.js',
            template: `public/${appName}.html`,
            filename: 'index.html',
            chunks: ["chunk-vendors", "chunk-common", "index", 'runtime~index'],
            title: appName === 'home' ? '云墨白的博客-Start with Hello World' : 'BAYMAX后台管理'
        }
    },

反向代理配置

由于项目使用到第三方的接口需要反向代理

  devServer: {
        sockHost: "localhost",
        disableHostCheck: true,
        port: 8080, // 端口号
        host: "0.0.0.0",
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        proxy: {
            //后台接口
            "/apis": {
                // target: "http://127.0.0.1:80/api/v1", // 需要请求的地址
                target: process.env.VUE_APP_API_URL, // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/apis": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            },
             //音乐接口
            "/music": {
                target: "https://music.liuzhijin.cn", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/music": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            },
             //每日英语接口
            "/english": {
                target: "http://sentence.iciba.com", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/english": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            },
            "/loimg": {
                target: "https://pc-store.lenovomm.cn/wallpapercontent/wallpaper/classify/tag_wallpapers", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/loimg": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            }
        }
    },

nginx配置

location /apis {        
      proxy_pass 自己后端域名;
    }
    location /vendor/sitemap/styles/xml.xsl {        
      proxy_pass https://api.yunmobai.cn/vendor/sitemap/styles/xml.xsl;
    }
    location /music {
      proxy_pass https://music.liuzhijin.cn/;
    }
    location /english {
      proxy_pass http://sentence.iciba.com/;
    }

自动化脚本

echo 同步远程仓库
git pull
echo 编译主页
npm run build_home
echo 删除源文件
rm -r ../js ../css ../img ../fonts
echo 拷贝主页
cp -rf ../home/. ../
echo 删除编译文件
rm -r ../home ../admin.html
echo 完成

空文件

简介

使用Vue 3.0重构博客前端!不依赖第三方UI框架。 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/koalas/by-vue3-blog.git
git@gitee.com:koalas/by-vue3-blog.git
koalas
by-vue3-blog
by-vue3-blog
master

搜索帮助