VuePress项目搭建
VuePress项目搭建
VuePress项目搭建 AirHua-byte 6/2/2021 other 10分钟搭建个人博客,属于自己的小屋 这是一个纷繁的时代,信息渠道已经多到快让人喘不过气来。 而个人博客这种来自互联网初的载体,似乎与这个环境显得格格不入。 就像大海中的小岛,在海浪中显得那么不起眼,但它的存在本身就彰显了一种意义。 无论是波涛汹涌,还是风平浪静,它都在那里,而你的心也就找到了一处可以停靠的港湾。 关于VuePress VuePress(opens new window) 主题:一款简洁而优雅的 vuepress 博客 & 文档 主题。 vuepress-theme-reco(opens new window) 环境搭建 安装node8.0+ node官网(opens new window) # 设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org # 查看使用的镜像源 npm config get registry # 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装官网提示下载安装包安装即可 安装完成后打开命令行工具,输入node -v,若返回版本信息则安装成功。 创建博客工程 # 安装vuepress npm install vuepress -g # 安装脚手架工具 npm install @vuepress-reco/theme-cli -g # 创建项目 theme-cli init my-blog #my-blog可替换成自己需要的项目名称AIA 上述命令执行后,在命令行窗口会进行一系列的信息配置 ? What's the title of your project? #键入您的项目标题 ? What's the description of your project? #键入您的项目描述 ? What's the author's name? #键入作者姓名 ? What style do you want your home page to be?(Select afternoon-grocery, if you want to download reco_luan's '午后南杂') (Use arrow keys) ❯ blog # 此处通过方向键选择您首页风格,这里我们选择blog doc afternoon-grocery 接下来进入您的工程目录,启动您的项目吧 # 接入项目目录 cd my-blog #my-blog替换为之前您填入的项目名称 # 安装npm npm install # 运行测试环境 npm run dev 访问命令行输出的ip地址,一般为http://localhost:8080(若端口被占用则依次递增,以终端输出为准),即可访问您的博客了! 博客配置 工程结构 ├─ node_modules #存放着项目所需的依赖,我们不需要关心 ├─ docs #该目录下存放您编写的文档 │ └─ theme-reco │ ├─ api.md │ ├─ plugin.md │ ├─ theme.md │ └─ README.md ├─ blogs #该目录下存放您编写的博客文章 │ ├─ category1 │ │ ├─ 2018 │ │ │ └─ 121501.md │ │ └─ 2019 │ │ └─ 092101.md │ ├─ category2 │ │ ├─ 2016 │ │ │ └─ 121501.md │ │ └─ 2017 │ │ └─ 092101.md │ └─ other │ └─ guide.md ├─ .vuepress # 该目录下存放项目配置文件与静态资源 │ ├─ config.js #该文件用于配置项目 │ └─ public # 该目录下存放网页中所需的静态资源 │ ├─ hero.png # 首页大图 │ ├─ logo.png # 站点logo │ ├─ favicon.ico #站点图标 │ └─ avatar.png #头像 ├─ package.json #依赖管理文件 └─ README.md #这里存放着博客首页的内容 配置启动页 启动页展示的内容为博客标题与描述,即您在创建工程时输入的内容 您可以在.vuepress/config.js下找到如下内容,通过修改对应的字符来改变您的启动页 // .vuepress/config.js module.exports = { "title": "test", "description": "test", } 配置首页 首页即为启动页之后的主页面 首页的内容由项目根目录下的README.md 配置生成,您可以通过更改其中的配置项来变更您的首页 --- home: true #指定该文件为您的首页,改为false则不作为首页 heroText: vuepress-theme-reco #首页居中显示的文本 tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语 # heroImage: /hero.png #首页显示的主图,默认被注释,取消注释可显示图片 # heroImageStyle: { # 首页主图的样式控制,默认被注释 # maxWidth: '600px', # width: '100%', # display: block, # margin: '9rem auto 2rem', # background: '#fff', # borderRadius: '1rem', # } bgImageStyle: { #背景图片样式 height: '450px' } # 以下内容基本上不生效,可以不用关心 isShowTitleInHome: false actionText: Guide actionLink: /views/other/guide features: - title: Yesterday details: 开发一款看着开心、写着顺手的 vuepress 博客主题 - title: Today details: 希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上 - title: Tomorrow details: 希望更多的爱好者能够参与进来,帮助这个主题更好的成长 --- Tip:代码中所引用的图片,均以.vuepress/public 为根目录 到此为主,您会注意到首页内容远不止这些,例如个人资料卡、文章列表,这些如何更改呢? 文章列表是根据您的文章自动生成的,一旦您发布的文章中的含有Front Matter,系统会自动将其收集至首页,默认按时间顺序展示 个人资料卡的头像和昵称由.vuepress/config.js进行配置,您可以找到如下内容,并进行修改配置。Category和Tag项则跟您的文章中标注的分类和标签自动生成 "author": "AirHua-byte", //昵称 "authorAvatar": "/avatar.png", //头像 Friend Link 则是您可以自由更改的,它的配置在.vuepress/config.js中,您可以找到如下内容,并对应进行修改配置,如果可以的话,您可以尝试将本站点添加为友链~ "friendLink": [ { "title": "AirHua-byte", //友联标题 "desc": "敲键盘、按快门与拨琴弦", //友链描述 "email": "3301833942@qq.com", //友链邮箱 "link": "http://huabyte.com" //友链地址 }, { "title": "vuepress-theme-reco", "desc": "A simple and beautiful vuepress Blog & Doc theme.", "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png", "link": "https://vuepress-theme-reco.recoluan.com" } ], 配置底部 底边栏展示了如主题、备案信息、版权、年份等信息,这些内容仍需要您前往.vuepress/config.js进行修改 "author": "me", //版权信息,与昵称为同一数据 "record": "xxxx", //备案信息 "startYear": "2017" //开始年份 配置导航栏 logo 您需要前往.vuepress/config.js找到如下内容,修改您的logo图片,该图片存储在.vuepress/public中 "logo": "/logo.png", 搜索 您需要前往.vuepress/config.js找到如下内容,修改搜索相关配置 "search": true, //是否开启搜索 "searchMaxSuggestions": 10, //最多的搜索建议条目 导航 您需要前往.vuepress/config.js找到如下内容,修改导航相关配置 其中: 导航文本为导航按钮所展示的文字信息 路由地址即为跳转路径,根目录/对应您项目的根目录,在项目打包时会将对应目录下的README.md文件生成为index.html,例如您想将链接指向您的/docs/myDocument/README.md,则将link内容改为`/docs/myDocument,便可访问到您的文档。 图标则为导航文本左边显示的图标,可以在reco图标库 (opens new window)中寻找您需要的图标,也可以不要图标 "nav": [ //如下代码中,每个{...}即为一个导航块 { "text": "Home", //导航文本 "link": "/", //路由地址 "icon": "reco-home" //图标 }, { "text": "TimeLine", "link": "/timeline/", "icon": "reco-date" }, { "text": "Docs", "icon": "reco-message", "items": [ { "text": "vuepress-reco", "link": "/docs/theme-reco/" } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } ], 或许您已经注意到,如果需要配置一个像Docs或者Contact这样的折叠的导航应该如何做呢?他们并不会直接跳转到对应的目标地址。 折叠导航的配置仍在之前所展示的导航配置代码中,现在将其单独提取出来进行分析。 即在导航块中加入一个items数组,数组元素为多个{...},是的,此{...}与导航块的{...}是同样的,所以您可以继续在其中添加文本、图标、路由等属性。 { "text": "Docs", //导航文本 "icon": "reco-message", //导航图标 "items": [ //导航子模块 { "text": "vuepress-reco", //子模块文本 "link": "/docs/theme-reco/" //子模块链接 } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } 文档写作 Front Matter 在markdown文档的顶部插入一段yaml配置代码 一个完整的 Front Matter 案例: --- title: 烤鸭的做法 date: 2019-08-08 sidebar: 'auto' categories: - 烹饪 - 爱好 tags: - 烤 - 鸭子 keys: - '123456' publish: false --- 常用变量说明: title :文章标题,放弃通过一级目录定义标题的方式,改在 Front Matter 中定义。 date :文章创建日期,格式 2019-08-08 或 2019-08-08 08:08:08。 sidebar:是否开启侧边栏。 categories :所属分类。 tags :所属标签。 keys: 所属标签。 publish :文章是否发布。 另外还有一些Vuepress 默认主题的变量例如prev, next,请移步 官方文档(opens new window) 摘要 在markdown代码中,您将看到注释,注释前面的代码将显示在列表页面上的文章摘要中。 --- title: Vuepress使用指南(reco) date: 2020-08-16 sidebar: 'auto' categories: - 工具 tags: - vue publish: true --- ::: tip Vuepress是Vue作者尤雨溪开发的文档工具,本文采用Vuepress的reco主题进行相关配置说明 ::: <!-- more --> ### markdown正文 deploy.sh #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd public # 如果是发布到自定义域名 # echo 'www.yourwebsite.com' > CNAME git init git add -A git commit -m 'deploy' # 如果你想要部署到 https://USERNAME.github.io git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git master # 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目 # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages cd -
 2022-5-26
axios配置
axios配置
关于Axios Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 全局配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 axios.defaults.baseURL='http://localhost:8080/user' // 设置超时时间 axios.defaults.timeout = 3000 function search() { var url= 'search'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } </script> 自定义配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 const ax = axios.create({ baseURL:'http://localhost:8080/user', timeout:'3000' }); function search() { var url= 'search'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } </script>
 2022-5-24
uni-app请求封装
uni-app请求封装
案例简介 基于promise封装请求,使用async await语法糖,参考插件市场,插件ID:niudandan-promise 详细使用 api.js const BASE_URL = '你的域名'; export const myRequest = (options)=>{ let token = uni.getStorageSync('token') return new Promise((resolve,reject)=>{ uni.request({ url: BASE_URL + options.url, // 将接口地址分为两部分,这样如果域名改变了好维护,接口地址从options中获取 header: { token: token, } || {}, method: options.method || 'GET',//默认Get data: options.data || {},// data从options中获取,如果没有传入data, 则默认一个空对象 success: (res) => { if (res.data.code === 1401) { } else { res } resolve(res); }, fail: (err) => { uni.showToast({ title: '请求接口失败', }); reject(err); }, }); }) } main.js //这个方法可能每个页面都会用到,我们可以在main.js中引入, import {myRequest} from 'api.js' //接收之后,挂载到全局,这样所有的页面都可以调用这个方法 Vue.prototype.$myRequest = myRequest; 使用方法:使用this.$myRequest进行调用 <button type="submit" @click="test()">发送请求</button> methods: { async test() { const res = await this.$myRequest({ url: '/api.php' }) this.dataa = res.data } }
 2022-5-11
Vue 服务端渲染
Vue 服务端渲染
小案例 // 1.创建vue实例 const Vue = require('vue') const server = require('express')() // 2.读取模板 const renderer = require('vue-server-renderer').createRenderer({ template:require('fs').readFileSync('./template.html','utf-8') }) // 3.处理Get方式请求 server.get('*',(req,res)=>{ res.set({'Content-Type':'text/html;charset=utf-8'}) const vm = new Vue({ data:{ title:'当前位置', url:req.url }, template: '<div>{{title}}:{{url}}</div>' }) // 4.将Vue 实例渲染为Html后输出 renderer.renderToString(vm,(err, html) => { if (err){ res.status(500).end('err'+err) return } res.end(html) }) }) server.listen(8080,function () { console.log('server started at localhost:8080') }) 模板文件 <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <!--vue-ssr-outlet--> </body> </html>
 2022-5-10
Vue安装命令
Vue安装命令
设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org 查看使用的镜像源 npm config get registry 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 卸载 npm uninstall vue-cli –g 打开命令行工具,通过npm方式全局安装@vue/cli脚手架,具体命令如下: npm install @vue/cli@3.10 –g 安装完成后,检测是否安装成功,使用如下命令来查看vue-cli的版本号: vue –V(或者vue --version) 上述命令运行后,结果如下所示: C:\vue>vue -V 3.10.0 使用vue create命令创建项目 vue create hello-vue(项目名) 项目创建完成后,执行如下命令进入项目目录,启动项目。 cd hello-vue npm run serve 项目启动后,会默认启动一个本地服务,如下所示 App running at: Local: http://localhost:8080/
 2022-5-3
Vuex搜索小案例
Vuex搜索小案例
什么情况下应该使用 Vuex? Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果不打算开发大型单页应用,应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,就要考虑如何更好地在组件外部管理状态,Vuex 是不错的选择。 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <div id="app"> <h3>列表查询</h3> <input v-model="id" type="text"> <input v-model="name" type="text"> <input type="submit" @click="search" value="搜索id"> <input type="submit" @click="searchName" value="搜索name"> <hr> <p> 搜索结果{{this.$store.getters.search}} 搜索结果{{this.$store.getters.searchName}} </p> <ul> <li v-for="item in this.$store.state.todos">{{item}}</li> </ul> <!-- {{this.$store.state.id}}--> </div> </body> <script> //创建一个store对象 var store = new Vuex.Store({ getters:{ search:state=>{ return state.todos.filter(todo=>todo.id==state.id) }, searchName:state=>{ return state.todos.filter(todo=>todo.text.indexOf(state.name)!=-1) } }, state:{ todos:[ {id:1,text:'张三'}, {id:2,text:'李四'}, {id:3,text:'王五'}, {id:4,text:'赵六'}, {id:5,text:'刘星宇'}, ], id:0, name:"" }, //修改store对象中的数据 mutations:{ search(state,id){ state.id = id;//将store中的id修改 }, searchName(state,name){ state.name = name;//将store中的id修改 } } }) new Vue({ el:"#app", data:{ id:'', name: "" }, store, methods:{ search:function () { //调用mutations中的search方法 this.$store.commit('search',this.id); }, searchName:function () { //调用mutations中的search方法 this.$store.commit('searchName',this.name); } } }) </script> </html>
 2022-4-26
Vue路由小案例
Vue路由小案例
Vue路由 一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="app"> <div style="width: 10%;height:600px;border:1px solid pink;"> <router-link to="/login">注册</router-link> <router-link to="/regist">登录</router-link> <router-link to="/grxx">个人信息</router-link> </div> <div style="width:60%;height:600px;border:1px solid blue;"> <router-view></router-view> </div> </div> </body> <script> // 创建三个组件 const login={ template:"<form action=\"\">\n" + " 用户:<input type=\"text\"><br>\n" + " 性别:<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" + " 年龄:<input type=\"number\"><br>\n" + " <button>注册</button>\n" + "</form>" } const regist={ template: "<form action=\"\">\n" + " 用户:<input type=\"text\"><br>\n" + " 密码:<input type=\"password\"><br>\n" + " <button>登录</button>\n" + "</form>" } const grxx={ template:"<form action=\"\">\n" + " 姓名:<input type=\"text\"><br>\n" + " 性别:<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" + " 年龄:<input type=\"number\"><br>\n" + " <button>确定</button>\n" + "</form>" } const vueRouter =new VueRouter({ mode:"history", routes:[ { path:'/login',component:login }, { path:'/regist',component: regist }, { path:'/grxx',component: grxx } ] }) new Vue({ el:"#app", router:vueRouter }) </script> <style> #app{ height: 600px; border:1px red solid; display: flex; } ul li{ margin-top: 15px; list-style: none; } </style> </html> 运行结果
 2022-4-5

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录