JavaWeb 课堂条记 —— 05 前端工程化
本系列为笔者学习JavaWeb的课堂条记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开辟教程，实现javaweb企业开辟全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。01 前后端混合开辟
https://i-blog.csdnimg.cn/direct/80a56586e4324a2086bfd00bef59267c.png
02 前后端分离开辟
https://i-blog.csdnimg.cn/direct/718109b340de4d0dacfbe39466c1cb4b.png
https://i-blog.csdnimg.cn/direct/fcf0880f12404a35850f2dda241c9f78.png
03 YAPI
YApi是高效、易用、功能强盛的api管理平台，旨在为开辟、产物、测试职员提供更优雅的接口管理服务。
https://i-blog.csdnimg.cn/direct/7121c1ca5a7d4ce1a1f79fd5e61d0038.png
04 前端工程化
前端工程化是指在企业级的前端项目开辟中，把前端开辟所需的工具、技术、流程、经验等进行规范化、尺度化。
05 环境准备
https://i-blog.csdnimg.cn/direct/fd8174d19a0c4c3e98c456ae9d5d7445.png
Ⅰ安装Node JS
https://i-blog.csdnimg.cn/direct/65172a3a6325414382119c544edce141.png
Ⅱ 设置环境
https://i-blog.csdnimg.cn/direct/11cf3e1b675544e7857c93d437737632.png
Ⅲ 切换npm的淘宝镜像
旧镜像
https://i-blog.csdnimg.cn/direct/b78e13231cc34b21a026419d68628e43.png
新镜像
https://i-blog.csdnimg.cn/direct/2a0998714742482ebef21969f9eb1f24.png
Ⅳ 安装vue-cli
npm install -g @vue/cli
https://i-blog.csdnimg.cn/direct/a842c214d0a44f6f886e194a6efd08da.png
https://i-blog.csdnimg.cn/direct/545f6b5f834f474fb6a0ec50d1df9791.png
06 Vue 项目简介
① 创建
//命令行
vue create vue-project01
//图形化界面
vue ui
https://i-blog.csdnimg.cn/direct/840533a9dd1649f49c5df6f61e35d162.png
② 目次结构
https://i-blog.csdnimg.cn/direct/25f1a3c7769e4586b93bf71ff171e008.png
③ 启动
https://i-blog.csdnimg.cn/direct/1f2b27ba20154f22b9fc3d3e6f2ee2fc.png
//命令行
npm run serve
https://i-blog.csdnimg.cn/direct/882c7f6c784a45fc892e05d5af73d781.png
https://i-blog.csdnimg.cn/direct/d1d221a7d60d4e54af8156a0ff69c82c.png
④ 设置端口
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port: 7000
}
})
https://i-blog.csdnimg.cn/direct/49cc4f21fa6c4634a07cd043db866dda.png
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>
https://i-blog.csdnimg.cn/direct/417a4e3ea3b644cab354b066991d64df.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]