先前搭过一版博客,主要是用
vue
+
vuex
,每次搭建个人博客都是学习的过程,想运用写新的东西。
在选用nuxt的时候主要看中的是它的
SSR
可以对首屏加载进行优化,同时也是为了更好的SEO。
在UI方面的选择,考虑过element-ui,最后还是选择了
vuetify
,主要是因为,Vuetify是一款正在极速发展的开源库,刚刚进入了它的1.0beta版本,它的控件非常丰富,和国内流行的ElementUI相当,新的控件还在不停的增加。它的优势在于依靠
Material Design
的设计优势,让你无需编写一行css代码就可以得到非常美观的界面功能。同时Vuetify还具备自适应的能力,可以使用一份代码写出同时兼容手机平板电脑的网页功能。
项目刚开始,应该不会流产吧~
github项目地址
可以给些建议。
先前搭过一版博客,主要是用vue+vuex,每次搭建个人博客都是学习的过程,想运用写新的东西。在选用nuxt的时候主要看中的是它的SSR可以对首屏加载进行优化,同时也是为了更好的SEO。在UI方面的选择,考虑过element-ui,最后还是选择了vuetify,主要是因为,Vuetify是一款正在极速发展的开源库,刚刚进入了它的1.0beta版本,它的控件非常丰富,和国内流行的ElementU...
预提交钩子(用于在推入之前运行ci测试)
要拥有一个自以为是的设置和开发工作流程,需要模拟服务器,线控,单元,端到端(E2E),正确的提交日志和检查,然后再进行推送。 有关更多详细信息,请参见模板。
这是的项目模板。
$ vue init joshvillahermosa/
nuxt
-
vuetify
-plus my-project
$ cd my-project
# install dependencies
$ npm install # Or yarn install
赛普拉斯集成
赫斯基整合
近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好
因此用
Nuxt
重构了该项目 对项目进行了一次优化
由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下
什么是
Nuxt
Nuxt
.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR)
Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名
对于公司内部网站等不需要排名的网站 可以不用SEO
但对于那些
<link data-n-head="1" rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
使用
离线方式加载
1.在
nuxt
export default {
// Plugins to run before rendering page: https://go.
nuxt
js.dev/config-plugins
plugins: [
{ src: '~/plugins/i18n.js' } //多语言配置文件
// Modules: https://go.
nuxt
js.dev/config-modules
modules: [
14年毕业至今,从事前端开发已经有一段时间了。前段时间突然心血来潮想
搭建
了一个
个人
网站,就买了个云服务器开始折腾。其实单纯
个人
网站一个页面比较轻松,主要期间顺便把之前自己整的几个vue、react 的小项目也一起修修改改部署上去,还是忙乎了一会。
网站的页面和功能都比较简单,涉及的技术和技术难度都不大。不过涉及的技术点比较多,而且前后端依赖的包都比较新,服务器安装的软件版本也比较高,虽然网上很...
何为
Nuxt
.js
Nuxt
.js是一个vue的服务端渲染的框架,集成了express框架,sass/less框架等等,ui框架如Bootstrap,
Vuetify
,Bulma,Tailwind,Element UI,Ant Design Vue,Buefy,方便的集成拓展其他框架,如eeLint等等,自动化打包,代码改动自动更新(服务器,前端代码),让开发变得简单。
文档地址在这: n...
GitHub 仓库: https://github.com/
nuxt
/
nuxt
.js
案例学习,推荐realworld https://github.com/gothinkster/realworld
可以
使用
你要学习的技术,来实现这个案例,前后端都可以。
将@
nuxt
js/
vuetify
依赖项添加到您的项目中
yarn add --dev @
nuxt
js/
vuetify
# or npm install --save-dev @
nuxt
js/
vuetify
添加@
nuxt
js/
vuetify
到buildModules的部分
nuxt
.config.js
:warning: 如果您
使用
的是
Nuxt
< 2.9.0 ,请改用modules 。
buildModules : [
// Simple usage
'@
nuxt
js/
vuetify
' ,
// With options
Vuetify
安装
vuetify
依赖-----vue add
vuetify
这里官方文档也有说:https://
vuetify
js.com/en/getting-started/quick-start/
主要记录自己的学习过程 也是在B站听一个老外叽里咕噜勉强学到了点
对于刚生成的项目App.vue这里需要...
Vue CLI安装
Vue CLI是下一代cli工具,用于抽象化构建应用程序的复杂性。当您
使用
Vue CLI启动应用程序时,无需繁琐的升级过程
1,查看你本地vue 的版本: vue --version,我本地的是2.9.6.
2,利用命令创建 my-app 应用**:vue create my-app
它提示我这不是最新的版本,至少需要vue-cli 3 以上的才可以,按照提示安装最新的vue-c
写在前面的话,公司工作很久了,一直都没有改过自己的技术栈,才觉得慢慢的落后于潮流,也知道自己的技术栈很老旧,想过要重构项目,但是项目周期时间一直不许,学习vue只能在下班的时间里面,这两年也断断续续的用过一些框架,但最后还是选中了
vuetify
。
vuetify
推荐指数:star:25.4k
适用:移动PC多端支持
GitHub地址:https://github.com/
vuetify
js/vu...
第一题:写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,...,a+nb 的时间,然后写一个 myClear,停止上面的 mySetInterVal
CSDN-Ada助手:
vue3+typescript引入外部文件
?.???/~:
vue3+typescript引入外部文件
Fanjj_iconCSDN:
uniapp使用云函数,调用微信敏感词、敏感图片检测接口
POP_Eason:
第一题:写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,...,a+nb 的时间,然后写一个 myClear,停止上面的 mySetInterVal
vue3+vite UC浏览器兼容