当前位置：首页 > wzjs >正文

百度广告管家深圳知名seo公司

wzjs 2025/8/21 8:12:00

百度广告管家,深圳知名seo公司,个人网站主页怎么做,网站博客怎么做本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）》，章节分布参考视频教程，为同样学习…

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 前后端混合开发

在这里插入图片描述

02 前后端分离开发

在这里插入图片描述

03 YAPI

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。

在这里插入图片描述

04 前端工程化

前端工程化是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

05 环境准备

在这里插入图片描述

Ⅰ安装Node JS

在这里插入图片描述

Ⅱ 配置环境

在这里插入图片描述

Ⅲ 切换npm的淘宝镜像

旧镜像

在这里插入图片描述

新镜像

在这里插入图片描述

Ⅳ 安装vue-cli

npm install -g @vue/cli

在这里插入图片描述

06 Vue 项目简介

① 创建

//命令行
vue create vue-project01

//图形化界面
vue ui

在这里插入图片描述

② 目录结构

在这里插入图片描述

③ 启动

在这里插入图片描述

//命令行
npm run serve

在这里插入图片描述

④ 配置端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{port: 7000}
})

在这里插入图片描述

07 Vue 项目开发流程

index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div> ⭐<!-- built files will be auto injected --></body>
</html>

main.js

import Vue from 'vue'
import App from './App.vue' //导入包
import router from './router'Vue.config.productionTip = false//核心对象
new Vue({router, //路由render: h => h(App) //将App中定义的视图创建对应虚拟DOM元素
}).$mount('#app') //挂载区域

App.vue

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/></div>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

在这里插入图片描述