首先要在.gitignore文件去掉/dist,这个文件默认是不上传的,但是执行打包bulid的时候会生成dist文件,而线上访问的是打包之后的dist文件: vue.config.js文件,如下图箭头那个要改为项目文件名称 点进pages 部署目录要填写dist,然后点击启动就可以生成网址地址啦

前言 base-admin从开源至今,已经收获了2k Stat,而我们一直都没有一份像样的在线文档,最近写了一个博客园随笔备份Java脚本,将博客随笔备份到本地,格式是md文档格式,就有意去找将md文档转成html的工具,最后选用了下面这个文档网站生成器,经过一段时间的学习.编写文档,配合Gitee Pages服务,重要有了一个像样的项目网站 https://huanzi-qch.gitee.io/base-admin 文档网站生成器 docsify 一个神奇的文档网站生成器,官网:https:

开启仓库的 Gitee Pages 服务,部署目录 dist/: Vite 构建 build,输出到 dist 文件:取消 .gitignore 中的 dist: Vite preview 查看静态网站是否无问题: 推送本次提交到仓库: 配置 vite.config.js: import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineC

GitHub 与 Gitee 提供的 Pages 服务中,均内嵌了 Jekyll 支持(Gitee 还提供了 Hugo 与 Hexo 支持).所谓「支持」,即指这些生成工具挂在云端:你只需要提供原始代码(如 Markdown 文档.Sass/Stylus/Less 样式表),再由 Pages 服务自动编译.部署即可.这样,搭建网站的技术门槛进一步下降,你只需要会两件事就能搭建网站了: 会写 Markdown 文档: 注册 GitHub 或 Gitee 账号,点点鼠标,在你的代码仓库中启用 Pag

GitHub Pages 常被用来部署个人博客,而无论是大名鼎鼎的 Jekyll,还是 Hugo 或者 Hexo,他们都是将我们的文章嵌入模板,发布为静态页面,也就是说,GitHub Pages (Gitee Pages) 只支持托管静态页面,包括页面所需的静态资源. 如我们所知, React 和 Vue 都包含一个对应的路由插件,而这个路由插件会有两种模式: Hash 模式 和 History 模式.关于两者最的基本区别可以参考 Vue-Router 中的描述,下一段是阐述,熟悉 Router

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

目录 快速入门 在现有vue项目中安装本地开发依赖vuepress 在现有vue项目根目录下创建docs目录 创建并配置文档首页内容 运行,查看效果 可能会出现vue和vue-server-renderer版本不匹配的报错 以下通过示例说明vuepress的基本使用方法 最终效果预览 示例目录结构说明 页面效果和文件对应关系说明 (Window OS)将项目文档部署到Gitee上 创建用于部署项目文档的仓库 配置script 在项目根目录创建build.bat和deploy.bat 在confi

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是 Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commu

回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家明白 nuxt.js 是如何一步步实现服务端渲染的),虽说是基于 Nuxt 的,但是数据源还是我们的老数据,就是 .net core api 的数据,和上一个项目中使用的是一样的,这里要说下,有的小伙伴说想要我的数据,这里暂时说抱歉,因为里边有一些我的私人的记录,还有一些网站密码啥的,我自己懒得一条

上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章也一直在往如何实现服务端渲染的方向讲解,因为我个人感觉这个是一个重点,如果是只会如何使用的话,大家就可以走马观花的看看就行了,昨天呢,遗留了几个问题,我也想了想,还没有想好如何通过浅显的话来概括,如果要是搬出来教科书似的讲解,感觉又不是很清晰,我就在以后的领悟中补充吧,这里就先说下其中的三个问题: 1.我们通

前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准

1.获取图书详情 1.修改server/controllers/bookdetail.js为 const {mysql}=require('../qcloud') module.exports=async(ctx)=>{ const {id}=ctx.request.query const detail=await mysql('books') .select('books.*','csessioninfo.user_info') .join('csessioninfo','books.open

1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/controllers下新增booklist.js const {mysql}=require('../qcloud') module.exports=async(ctx)=>{ const books=await mysql('books').select('*').orderBy('id','des

1.图书录入功能 1.获取图书信息 1.在mydemo/src/until.js中封装工具函数post和get // 工具函数 import config from './config' // http get工具函数 获取数据 export function get (url,data) { return request(url,'GET',data) } export function post (url,data) { return request(url,'POST',data) } f

1.用户信息的获取和展示 1.初始化数据库 cd到server目录下,执行 node tools/initdb.js 登录mysql控制界面,查看初始化以后生成的表 show databases; use cauth; show tables; 如果报错(往往因为mysql的版本8.0什么的,加密方式导致初始化脚本报错),解决办法 进入mysql alter user 'root'@'localhost' identified with mysql_native_password by '数据库

https://router.vuejs.org/zh/ 可以先翻翻文档看看介绍啊,一般我不怎么喜欢看文档,都是直接看人家案例,在回头看文档的,所以学习速度慢很多,希望我以后成为一个爱学习的妹子,比较朝这个方向努力了N年. 我理解的路由就是你那边组件用到路由,就在路由route.js上面配置 route.js配置 import Vue from 'vue'import Router from 'vue‐router'import index from '@/pages/home/index.vu

一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) //eg2 需要syntax-dynamic-import插件 const MSite = () => import('../pages/MSite/MSite.vue') //异步加载 //import MSite from '../pages/MSite/M

1.Vue-cli 1.新建一个vue项目 打开cmd 官方命令行工具 npm install -g vue-cli //安装脚手架 cd到你想要存放demo的目录下,然后 vue init webpack vue-demo //新建demo 其中user EsLint....那一行选项要选n 还有选最后一条时,让你选npm.yarn.No,I can handle it myselft,要选第三个No,I can handle it myselft,不然有可能一整天都新建不完. 然后执行 cd

新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js   配置目录入口文件 import api from './website' // 当前平台 export const H

1.介绍vue MVP和MVVM模式!!! mvp模式,其中m是模型是ajax请求数据, v是视图层(html),p是控制器,就是使用jq来实现业务逻辑相关操作(DOM操作很多) MVVM模式,其中M是new实例里面相关操作,v是视图层,vm即vue自己进行操作转化! 首先使用vue(mvvm模式)可以通过两种方式, 第一种:是直接通过引入vue.js的形式,那么这时候的vue直接写在<script></script>里面,这时候的vue是全局注册作为全局变量!我们进行全局注册组件

报错: 翻译过来是: [Vue警告]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配.这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失.Bailing水化和执行完整的客户端渲染. 解决方案 把上面注释的div删掉就正常了 我也不清楚,在pages下的vue页面中为什么不能有注释,在这里先记下了.