Vue3+vite个人博客网站从0-1(项目环境搭建)

简介: Vue3+vite个人博客网站从0-1(项目环境搭建)

前段时间在用vue3重构自己公司项目,因为涉及到公司机密项目搭建完成之后就没有继续更新,


就寻思着和后端一起搭建一个博客网站,因为是自己玩,怎么玩都行,就用上了vite 边做边摸索。


目前博客1.0版本暂时准备开发 用户 文章 专栏 留言四大类, 如果你也想搭建一个属于自己的博客网站 ,就快来跟着一起学吧!


安装vite

npm i -g create-vite-app


使用create-vite-app命令创建项目

create-vite-app blog


fc8b91a18eab4384ae55e9f7443c50c8.png


进入项目中 安装依赖

npm i

yarn


5daab7e33cfc413cae24a59a6c3ce1a8.png


yarn的安装方法


npm install -g yarn


然后就可以尝试运行项目

npm run dev

yarn dev


9809c46a8faf467097930c3fa98a0158.png


b2499b9681414210bfaf0298eba56e72.png


到这里项目就安装完成


配置router和vuex


创建src/view文件夹


在view文件夹下创建首页 home,layout文件


7277ad39fb114435af29f522c6d2c22e.png


安装相关依赖


yarn add vue-router@next


创建src/router/index.js文件


创建路由对象并抛出

// 引入
import {  createRouter, createWebHashHistory} from 'vue-router'
/* 引入首页 路由 */
import Home from '../view/home.vue'
import layout from '../view/layout.vue'
const Router = createRouter({
    history: createWebHashHistory(),
    routes:[{
        path:'/',
        name:'home',
        component:Home
    },
{
    path:'/layout',
    name:'layout',
    component:layout
}]
})
// 导出
export default Router


然后在main.js中引入router

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 引入 router
import router from './router/index'
createApp(App).use(router).mount('#app')


最后在App.vue中插入路由

<template>
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App',
}
</script>


然后到这里在运行代码就可以看到首页/路由页

2ba634ba7f004f19a72737067b94daa6.png


28d1e99877db4cf4a5914f96fa5b26ee.png


Vuex


安装相关依赖

yarn add vuex@next


安装vuex持久化插件

npm i vuex-persistedstate

yarn add vuex-persistedstate


创建src/store/modules文件夹


创建src/store/modules/use.js文件

// 用户模块
export default {
    namespaced: true,
    state () {
      return {
      }
    },
    mutations: {
      // 修改用户信息
    }
  }


创建src/store/index.js文件

import { createStore } from 'vuex'
// 持久化
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
export default createStore({
  modules: {
    user
  },
  // 持久化
  plugins: [
    createPersistedstate({
      key: 'blog',
      paths: ['user']
    })
  ]
})


在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 引入 router
import router from './router/index'
// 引入 store
import store from './store/index'
createApp(App).use(router).use(store).mount('#app')


到这里基本的配置就已经完成了。



目录
打赏
0
0
0
0
3
分享
相关文章
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
84 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
82 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
61 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
76 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
78 12
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
213 1
vite-Vue的无捆绑开发服务
vite-Vue的无捆绑开发服务
124 0
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
161 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等