从零开始搭建博客网站-----构建项目

构建项目

视频参考链接

构建一个项目文件（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'),
    },
  },
})