使用 nuxt + vuetify + koa2 + vuex 搭建个人博客

先前搭过一版博客,主要是用vue+vuex,每次搭建个人博客都是学习的过程,想运用写新的东西。

在选用nuxt的时候主要看中的是它的SSR可以对首屏加载进行优化,同时也是为了更好的SEO。

在UI方面的选择,考虑过element-ui,最后还是选择了vuetify,主要是因为,Vuetify是一款正在极速发展的开源库,刚刚进入了它的1.0beta版本,它的控件非常丰富,和国内流行的ElementUI相当,新的控件还在不停的增加。它的优势在于依靠Material Design的设计优势,让你无需编写一行css代码就可以得到非常美观的界面功能。同时Vuetify还具备自适应的能力,可以使用一份代码写出同时兼容手机平板电脑的网页功能。

项目刚开始,应该不会流产吧~

github项目地址

可以给些建议。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Nuxt.js是一个基于Vue.js的应用框架,而VuexVue.js的官方状态管理库。在Nuxt.js中使用Vuex可以帮助我们更好地管理应用的状态。在Nuxt.js 3中,使用Vuex也是相似的,你可以通过安装和配置Vuex来集成它到你的Nuxt.js 3项目中。 首先,你需要安装Vuex。在你的Nuxt.js 3项目根目录下运行以下命令: ``` npm install vuex ``` 然后,在你的项目中创建一个名为`store`的文件夹。在`store`文件夹下创建一个`index.js`文件作为Vuex的入口文件。 在`index.js`文件中,你需要导入VueVuex,并创建一个新的Vuex Store实例。示例代码如下: ```javascript import { createStore } from 'vuex' const store = createStore({ state() { return { // 状态属性 } }, mutations: { // 修改状态属性的方法 }, actions: { // 异步操作和业务逻辑 }, getters: { // 计算属性 } }) export default store ``` 在`state`中定义你的状态属性,在`mutations`中定义修改状态属性的方法,在`actions`中处理异步操作和业务逻辑,在`getters`中定义计算属性。 最后,将创建的Vuex Store实例导出,并在Nuxt.js 3的配置文件(`nuxt.config.js`)中进行配置。示例配置代码如下: ```javascript export default { // ... plugins: [ '~/store' // 导入Vuex Store实例 ], // ... } ``` 通过以上步骤,你就可以在Nuxt.js 3项目中使用Vuex来管理应用状态了。通过在组件中使用`$store`访问和修改状态属性,以及调用`$store.dispatch`触发异步操作和业务逻辑。 希望这能解答你关于Nuxt.js 3和Vuex的问题。如果还有其他疑问,请随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zxyGo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值