01.何谓渐进式
-
Vue不强求一次性接受并使用其全部的功能和特性，用户可以使用或者能用的功能特性，其他的部分可以暂时不用。这就是Vue提倡的渐进式。
-
比如：Web端开发使用了vue中的部分功能。
-
但是随着项目的进展组建实现代码组件化以实现代码的复用。或者基于组件原型的跨项目的代码复用。那么这个时候可以引入Vue的components组件功能。
-
应用前后端分离，你可以就会使用vue-router , vuex 和异步请求。
问：为什么在web的核心部分我们不去使用vue-router和vuex管理？
假设java开发。你路由springmvc管理。vuex是服务器用session。
02、Vue的核心功能
响应式数据的绑定：
当数据发生改变时，视图也可以自动更新，可以不用关心DOM操作，而专心数据操作。
vue3.0写法：
var app = Vue.createApp({
data() {
return {
title: "我是Vue3.0" /*data中定义的所有数据都是响应式数据*/
}
}
}).mount("#app");
js写法：
var title = "我是Javascript";
var appDom = document.getElementById("app");
appDom.innerHTML = title;
// 对象监听 + 代理模式
组件化
可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级级的组合整个应用行为倒置的组件树，可维护，可扩展，可重用，可以拆卸。
成熟组件：A Vue 3 UI Framework | Element Plus 和 antd
自定义组件：
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://unpkg.com/vue@next"></script>
<style>
.btn {
border: 0;
}
.pug-btn-success {
background: green;
color: #fff;
}
.pug-btn-error {
background: red;
color: #fff;
}
.pug-btn-default {
background: #999;
color: #fff;
}
.pug-btn-info {
background: gray;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
{{title}}
<el-button type="success">保存</el-button>
<el-button type="warn">注册</el-button>
<el-button type="info">登录</el-button>
<el-button type="error">其他</el-button>
</div>
<script>
var app = Vue.createApp({
data() { /*data中定义的所有数据都是响应式数据*/
return {
title: "我是Vue3.0"
}
}
});
// 组件化
app.component("ElButton", {
props: {
type: {
type: String,
default: "success"
}
},
template: `<button v-bind:class="'btn pug-btn-'+type"><slot/></button>`
})
app.mount("#app");
</script>
</body>
</html>
前端理由
肯定是用vue-router 。为什么会有vue-router路由的出现？
更流畅的用户体验，灵活地在页面切换已经渲染组件的显示。不需要和后端做多余的交互。
在传统开发中，我们大部分的情况下是把页面和业务框架全部融合在一起，也就是所谓的单体架构开发。不论你是javaweb传统的jsp/servlet+js开发，还是使用ssm+jsp，还是当下流行springboot +freemaker/thymeleaf +html/ftl + vue开发。它们的路由其实都是通过服务端来控制和管理的。比如：servlet / sturts2 / springmvc 。
一句话：单体架构根本就不要vue-router 。因为服务端自己存在路由管理。
现在开发的模式，前后分离最大的特征：服务端不在去管理页面和视图的渲染的工作了。就说服务端根本就没有页面和视图管理机制。那么前端的页面模块的分发和调整就成为了前端开发的一个阻碍。必须找到一种在单页中支持所有的跳转。vue-router营运而生。
那为什么在开发中，我们还在使用springmvc呢？因为我们在使用前端分离开发的模式中，springmvc已经不在是起到路由跳转找页面的作用，我们利用的是springmvc的异步返回机制，提供数据接口仅此而已，也句告诉我们一个道理，在写前后端开发的时候，springmvc中所有的类和方法都应该是异步方法@RestController. 也就是说使用@Controller没有任何意义。
状态集中管理
传统的开发开发，数据都是放在作用域中的比如：request,session,application中进行管理的。一旦前后端分离，数据的管理脱离服务端。在前端通过vue-router跳转路由的时候，肯定就会存在数据的交互和共享。如果每次都是通过层层传递的话，肯定是不现实。就必须要找到一个中共享的机制来完成这件时间，就是vuex管理。从而实现多组件直接的状态数据同步和管理问题。
问：为什么前后端分离的开发项目我们不能够放在服务器端的session中呢？
1：我们知道服务端的session是通过cookie来:连接和共享。cookie的生成是通过域ip和port来完成的建设。
2：以为我们开发时候前端和后端服务是两个独立的服务。后台是tomcat运行的服务端口是：8080 。那么前端的服务是通过webpack、nodejs构建web服务，它的端是：3000/8081
3：未来我们可能部署的时候，服务器ip都可能不相同。比如服务端部署在：125.25.157.12 –cookie, 而我前端服务是部署在：185.25.158.14–访问 session ,
问：如果我硬要放到session，如果如何能够像传统方式一种获取到呢？
发布项目的时候，把打包的前端项目放入到后端工程的static目录下即可。
使用nginx统一带来。cookie的生成指定域来生成。
前端工程化
vue-cli : 启动很慢，打包的很快，js体积非常的大。
vite : 启动冷启动，打包更快，js体积还是很大
结合 webpack + babel 等前端带包工具，管理多种静态资源，代码，测试，发布等整合前端大型项目。
-
类似于：maven (聚合，管理，创建项目，仓库)
-
vite 、vue-cli (聚合，管理（npm），创建项目(webpack)，仓库(npm
03、Vue3.0学习的准备工作
-
安装Nodejs 版本 （Vite 需要 Node.js 版本 >= 12.0.0。）
-
nodejs下载：下载 | Node.js 中文网
-
node -v 和 npm -v
-
-
设置npm的镜像
1.将npm设置为淘宝镜像： npm config set registry https://registry.npm.taobao.org 2. 查看npm镜像设置： npm config get registry 3.通过cnpm使用淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 4.查看cnpm镜像设置： cnpm config get registry 5:按照yarn npm install -g yarn
-
默认下载仓库地址是：https://www.npmjs.com/
-
05、Vue3.0的项目开发 vue-cli（前后端分离）
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli：
官网：Vue CLI
安装vue3
# 最新稳定版 $ npm install vue@next
安装vue-cli
npm install -g @vue/cli # OR yarn global add @vue/cli
你还可以用这个命令来检查其版本是否正确：
vue --version
如需升级全局的 Vue CLI 包，请运行：
npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli
创建一个项目
vue create
运行以下命令来创建一个新项目：
vue create hello-world
警告
如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。我们会在下一个章节讨论 preset 和插件。
~/.vuerc
被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。
vue create 命令有一些可选项，你可以通过运行以下命令进行探索：
vue create --help 用法：create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项： -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略提示符并使用默认预设选项 -i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项 -m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端 -r, --registry <url> 在安装依赖时使用指定的 npm registry -g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息 -n, --no-git 跳过 git 初始化 -f, --force 覆写目标目录可能存在的配置 -c, --clone 使用 git clone 获取远程预设选项 -x, --proxy 使用指定的代理创建项目 -b, --bare 创建项目时省略默认组件中的新手指导信息 -h, --help 输出使用帮助信息
使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
命令启动服务
你可以通过 npm 或 Yarn 调用这些 script： npm run serve # OR yarn serve
关闭服务
ctrl+c 多按几次即可退出服务。
06、Vuecli - Vue2.0的版本的项目结构的认识和理解
-
main.js 是工程的入口文件，也是vue导入，插件注册，组件注册，vue实例化的一个文件。
-
App.vue 是首页，起到视图存放作用。注意：在你没有安装vue-router 之前，和普通的 spa单页无差别。但是如果你安装了vue-router接下就起到了请求路由，把请求路由的地址渲染到app.vue指定位置。<route-view>
-
assets是存放额外的css/js/html文件。放在这里的文件，在打包的时候会自动复制到项目中。
-
components 后续项目中自定义的组件。就好比之前我们学习jsp的header.jsp和footer.jsp z这里里面定义的组件，就必须给 spa页面去使用，这里就会牵涉一个话题：组件的注册
-
局部注册 : 那个spa需要就在那个页面去导入，在使用 （按需加载）
-
全局注册：通过插件机制进行全局注册，然后就可以在任何spa页面使用。(一劳永逸)
-
-
public 是公共页面。还不如说模板页面。index.html
08、第一个Vue3.0程序
01、项目初始化
使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
然后按照提示操作即可！
# 进入项目 cd vue3pro # 开始安装依赖组件 npm install # 运行项目 npm run dev
具体步骤如下：
1、把vue3pro项目拉入到vscode中
2、然后执行ctrl+ ` 调出vscode命令行
3、然后执行npm install 安装完毕之后
4、在启动项目npm run dev 即可
5、运行访问：http://loaclhost:3000 即可
6：关闭服务：按多次ctrl+c
02、路由安装
仅限于我们现有的学习，后面还会深度的探讨。
npm
npm install vue-router@4
yarn
yarn add vue-router@4
1、安装vue-router
2、在src/router/index.js内容如下：
// 导入vue-router，引入createRouter和createWebHashHistory方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 路由注册
const routes = []
// 创建路由对象
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 导出路由对象
export default router
3、注册router在main.js让其生效
/*导入vue的createApp方法用于创建vue实例 */
import { createApp } from 'vue'
/*指定渲染的起始页面,也是访问路由渲染的位置页面 */
import App from './App.vue'
/*导入vue-router */
//等价于：import router from './router/index.js'
import router from './router'
/*创建vue实例*/
const app = createApp(App);
/* 注册路由 */
app.use(router);
/*挂在vue实例到指定的dom */
app.mount('#app')
4：开始定义Home.vue和About.vue 的SPA页面
5：在APP.vue引入home.vue和aboute.vue的链接地址和指定路由渲染的位置
<template>
<div class="container">
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<!--未来访问的任何的spa单页都会把页面的内容插入到router-view的位置 -->
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style>
.container{
display: flex;
justify-content: center;
}
</style>
6：启动访问：npm run dev 访问 http://localhost:3000
09、Vite的项目结构
-
main.js 是工程的入口文件，也是vue导入，插件注册，组件注册，vue实例化的一个文件。
-
App.vue 是首页，起到视图存放作用。注意：在你没有安装vue-router 之前，和普通的 spa单页无差别。但是如果你安装了vue-router接下就起到了请求路由，把请求路由的地址渲染到app.vue指定位置。<route-view>
-
assets是存放额外的css/js/html文件。放在这里的文件，在打包的时候会自动复制到项目中。
-
components 后续项目中自定义的组件。就好比之前我们学习jsp的header.jsp和footer.jsp z这里里面定义的组件，就必须给 spa页面去使用，这里就会牵涉一个话题：组件的注册
-
局部注册 : 那个spa需要就在那个页面去导入，在使用 （按需加载）
-
全局注册：通过插件机制进行全局注册，然后就可以在任何spa页面使用。(一劳永逸)
-
-
public 是公共页面。还不如说模板页面。index.html
-
==内部发生对setup组合api全新的封装，不在支持vue2写法。==
vite.config.js---appplication.yml
package.json---pom.xml
assets---static
views ----template
components --- include
router ---springmvc/servlet/strtus2
vuex --- session/redis
10、学习ES6语法
1.let 和const用法
2.数组用法：
3.对象解构：
3781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
