从零开始搭建博客网站-----构建项目
构建项目
视频参考链接
- 构建一个项目文件（node为17.16.0版本）
构建的过程中可能会出现一个选项，选择vue+JavaScript
npm init vite@latest easyblog-front-admin
- 安装相关依赖
cd easyblog-front-admin
npm install
3. 运行
npm run dev
好了，一个vue项目就算新建完成了。
清理一下新建的项目的内容
- app.vue
- 建立路由文件并安装路由
- 在router下新建index.js文件，并写如下内容
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{}
];
//这里不是通过new来创建，通过createRouter 方法创建，使用的模式不是通过mode来定义
const router = createRouter({
routes,
history: createWebHistory(),
})
export default router
- 修改main.js文件，引用router
- 配置代码片段补全
参考链接
需要补全的文件有三个，文件内容如下：
vue.json
{
"Print to console": {
"prefix": "vue3",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script setup>",
"",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"</style>",
],
"description": "Log output to console"
}
}
vue-html.json
{
"el-form模板": {
"prefix": "el-form",
"description": "创建el-form",
"body": [
"<el-form",
" :model=\"formData\"",
" :rules=\"rules\"",
" ref=\"formDataRef\"",
" label-width=\"80px\"",
">",
"<!--input输入-->",
" <el-form-item label=\"\" prop=\"\" >",
" <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
" </el-form-item>",
"<!--textarea输入-->",
" <el-form-item",
" label=\"\"",
" prop=\"\"",
" clearable",
" placeholder=\"提示信息\"",
" type=\"textarea\"",
" :rows=\"5\"",
" :maxlength=\"150\"",
" resize=\"none\"",
" show-word-limit",
" v-model=\"formData.\"",
" >",
" </el-form-item>",
"<!-- 单选 -->",
" <el-form-item label=\"\" prop=\"\" >",
" <el-radio-group v-model=\"formData.\">",
" <el-radio :label=\"值1\">显示信息</el-radio>",
" <el-radio :label=\"值2\">显示信息</el-radio>",
" </el-radio-group>",
" </el-form-item>",
"<!-- 下拉框 -->",
" <el-form-item label=\"\" prop=\"\" >",
" <el-select clearable placeholder=\"提示信息\" v-model=\"formData.\" ,>",
" <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
" <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
" </el-select>",
" </el-form-item>",
"</el-form>",
]
},
"el-input模板": {
"prefix": "el-input",
"description": "创建el-input",
"body": [
"<!--input输入-->",
" <el-form-item label=\"\" prop=\"\" >",
" <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
" </el-form-item>",
]
},
"el-textarea模板": {
"prefix": "el-textarea",
"description": "创建el-input",
"body": [
"<!--textarea输入-->",
"<el-form-item",
" label=\"\"",
" prop=\"\"",
" clearable",
" placeholder=\"提示信息\"",
" type=\"textarea\"",
" :rows=\"5\"",
" :maxlength=\"150\"",
" resize=\"none\"",
" show-word-limit",
" v-model=\"formData.\"",
" >",
"</el-form-item>",
]
},
"el-radio模板": {
"prefix": "el-radio",
"description": "创建el-radio",
"body": [
"<!-- 单选 -->",
" <el-form-item label=\"\" prop=\"\" >",
" <el-radio-group v-model=\"formData.\">",
" <el-radio :label=\"值1\">显示信息</el-radio>",
" <el-radio :label=\"值2\">显示信息</el-radio>",
" </el-radio-group>",
" </el-form-item>",
]
},
"el-select模板": {
"prefix": "el-select",
"description": "创建el-select模板",
"body": [
"<!-- 下拉框 -->",
" <el-form-item label=\"\" prop=\"\" >",
" <el-select clearable placeholder=\"提示信息\" v-model=\"formData.\" ,>",
" <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
" <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
" </el-select>",
" </el-form-item>",
]
},
}
javascript.lson
{
"dialog弹窗配置": {
"prefix": "dialogConfig",
"description": "弹窗config配置",
"body": [
"const dialogConfig = reactive({",
" show: false,",
" title: \"标题\",",
" buttons: [",
" {",
" type: \"danger\",",
" text: \"确定\",",
" click: (e) => {",
" submitForm();",
" },",
" },",
" ],",
"});"
]
},
"watch使用": {
"prefix": "watch",
"description": "快速实现watch",
"body": [
"watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true });",
]
}
}
- 创建view文件夹，并且创建Index.js文件，Index文件内容如下
完成了一个简单的路由映射
涉及的三个文件如图
修改一下配置文件，对路径进行索引配置
内容如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
hmr: true,
port: 3001,
proxy: {
'/api': {
target: "http://localhost:8081/", // 目标代理接口地址
secure: false,
changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/api',
},
},
},
},
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
还需要安装path包
npm install path --save
项目的初始搭建就完成啦！整个过程还算顺利！