一、node.js
1-概述
- node不是一个语言，而是一个js的运行环境
- JavaScript 简称 js 是一个解释性语言
- js代码 + js解释器 --》 逐行解释并运行，出现程序执行结果
- js、html语言的解释器，都在内置的浏览器中
- js代码 + 浏览器 --》 前端技术，可以用来给网页添加动态效果
- js代码 + node --》 后端技术，可以用来开发接口、和数据库交互
- node是基于chrome v8引擎的 js 运行环境
- node 封装了很多的模块（插件）用于支持使用js实现接口开发
- js代码 + js解释器 --》 逐行解释并运行，出现程序执行结果
2-为什么要接触node
- 接触node是为了学习npm
- npm是依赖于node的
- 想学习npm，电脑上首先要安装node的环境，而node环境中自带npm
3-node的下载
下载地址：Index of /dist/
选择自己所需的版本下载
注意：
- 版本 LTS node提供的长期稳定版
- msi 微软安装包 在windows系统可以直接使用
- x64 64为操作系统 x86是32位操作系统
4-node的安装
-
一直下一步 安装路径尽量别出现中文即可
-
安装之后 命令行 输入 node -v 查看node版本
5-基本使用（了解即可）
方式一：
- 打开命令行 输入node 即可进入node的即时运行界面
- 可以使用js语法 定义变量、函数、编写逻辑 在node上执行出结果
方式二：
定义一个js文件 js文件中写逻辑 打开命令行 输入 node js文件的名字 即可运行js代码
二、npm
1-概述
-
npm 是一种用于下载模块(插件)的包管理工具
-
npm 对标 java中的maven技术
-
npm是依赖node的 所以想要使用npm 必须按照node
2-查看npm的版本信息
在命令行中输入 npm -v
3-学习npm的命令
-
npm root 查看模块的局部下载、安装的路径
-
npm root 查看得到的路径 其实就是当前路径 下 node_modules目录
-
-
npm root -g 查看模块全局下载、安装的路径
-
C:\Users\Administrator\AppData\Roaming\npm\node_modules
-
-
npm中 全局 和 局部的含义
-
全局 就表示整个计算机
-
全局安装的模块 在整台计算机 任何目录下都可以使用
-
-
局部 就是当前目录
-
局部安装的模块 装在哪 就只能在哪用
-
-
-
npm install 模块名字 局部安装
-
简写 npm i 模块名字 局部安装
-
-
npm install 模块名字 -g 全局安装
-
简写 npm i 模块名字 -g 全局安装
-
-
npm uninstall 模块名字 局部卸载
-
简写 npm uni 模块名字 局部卸载
-
-
npm unistall 模块名字 -g 全局卸载
-
简写 npm uni 模块名字 -g 全局卸载
-
-
npm update 模块名字 更新模块
-
npm update 模块名字 -g 全局更新
三、vue-cli
1-概述
-
vue-cli 叫做vue的脚手架。
-
vue-cli 的作用就是帮助开发人员 非常简单、快捷的搭建一个vue项目出来。
2-使用vue脚手架 创建vue项目
-
安装 vue-cli：window+R，输入cmd，输入“ npm i vue-cli -g”
-
查看vue-cli版本信息（查看是否安装成功）：输入“ vue -V ”
-
找到想要创建vue项目的目录 打开命令行
-
输入 vue init webpack 项目名字 就可以创建vue项目(保持电脑有网)
-
下载好模板之后 开发人员需要输入项目的配置信息 才能完成vue项目创建
-
project name 项目名字 直接回车 创建项目的时候输入的名字就是默认的项目名
-
description 项目描述 直接回车 不添加描述
-
router(y/n) vue路由 输入y 表示 添加路由插件 输入 n 表示 不添加路由插件 一定要输入y 回车
-
带test的选项 vue项目自带的测试用的模块 统统输入 n 不需要
-
compile 选项 表示 vue项目的打包、编译机制 选择 rumtime+compile
-
package 选项 包管理工具
-
npm 选择npm
-
yarn
-
-
注意:安装完成后要根据提示依次输入
cd demo
npm run dev若跳出以下页面就是运行成功!!
在浏览器中输入地址:http://localhost:8080 (注意:在这的端口号是可以变得,当8080端口被占的时候,就会用8081端口,依次往后推)
展示页面:
3-运行失败的解决办法
若发生报错
Error: No valid exports main found for 'D:\Program Files\nodejs\node_modules\@vue\cli\node_modules\estree-walker'
at resolveExportsTarget (internal/modules/cjs/loader.js:611:9)
at applyExports (internal/modules/cjs/loader.js:492:14)
at resolveExports (internal/modules/cjs/loader.js:541:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:643:22)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:941:27)
at Function.Module._load (internal/modules/cjs/loader.js:847:27)
at Module.require (internal/modules/cjs/loader.js:1016:19)
at require (internal/modules/cjs/helpers.js:69:18)
at Object.<anonymous> (D:\Program Files\nodejs\node_modules\@vue\cli\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:8:20)
at Module._compile (internal/modules/cjs/loader.js:1121:30) {
code: 'MODULE_NOT_FOUND'
}解决方法:将vue升级到版本14之上
4-关闭服务器
ctrl+c 输入Y
四、vue项目的目录结构
拓展：
1-在Visual Studio Code中运行vue项目
点击三角号 --> 选择" 终端 " --> 输入指令 " npm run dev "
2-vue项目相互调试
注意:在将vue文件传给别人的时候,由于文件太大,会把node_modules删掉再传
这样第二个人打开后是运行不了的,需要在命令行中输入npm install 或者 npm i 来安装第三方模块所需要的配置文件
第三方模块所需要的配置信息存放在"package-lock.json"和"package.json"中,其中"package-lock.json"存放的信息更加详细
3-package.json(运行命令位置)
五、启动流程(理解)
1-步骤
1-读取 index.html 文件
2-读取 main.js 文件( vue项目的入口文件 )
3-main.js中加载App.vue主组件
4-将App.vue主组件的内容渲染到html上
5-加载vue的路由文件
路由文件中配置跟路由 / 所匹配的组件为 HelloWorld.vue
6-将App.vue中标签替换为根路由所指向的组件
( 注意:标签只是一个占位符,项目运行的时候,该标签会被根路由所指向的组件所替换掉 )
流程图：
2-蕴藏知识点
1-" import App from './App' " 的完整写法及作用:
import App from './App'
完整写法:
import App from './App.vue'
作用:
将根组件导入到 main.js 中2- " import router from './router' " 的完整写法及作用:
import router from './router'
完整写法:
import router from './router/index.js'
当引入 js 文件时,路径只写到router文件夹,他默认引得是router文件夹下的index.js文件
作用:
引入根路由3- 新建vue每个语句的含义
六、单文件组件
1-组件的分类
1-局部组件：
new Vue({
el:' #id的值 ', //绑定前端的标签
data:{}, // 数据
methods:{}, // 方法
...
components:{
'组件名字' :{
template:'组件所包含的标签',
data(){
return{
k:v
}
},
methods
}
}
})2-全局组件：
Vue.component('组件名字',{
template:'组件所包含的标签',
data(){
return{
k:v
}
},
methods:{
...
}
......
})
注意：不管是全局组件还是局部组件,都可以看成是自定义标签,但本质上就是一个单独的vue实例,可以添加data,methods...只不过,给组件添加的data / methdos / watch ... 只能给当前组件使用
3-单文件组件：
主要用于解决局部组件 / 全局组件可读性差,不易于编码,开发问题
所谓的单文件组件,其实就是一个 .vue文件 这个文件的名字就是组件的名字
<template>
添加组件所包含的标签 注意 ：必须是单个根标签
</template>
<script>
//js部分 比如 data、 methods、各种钩子函数等等
//这部分动态代码 只能引用于当前组件的 tempalte中
export default{
data(){
return {k:v}
},
methods:{
....
},
computed:{},
watch:{},
created(){
}
.........
}
</script>
<style scoped> // scoped:这里面的样式只用于该组件中,其他的地方使用没有效果
//样式部分
</style>注意:使用vscode开发单文件组件 需要下载 vetur的插件( .vue 文件可以有提示以及高亮效果 )
2-案例:计算机
实例代码：
<template>
<div id="demo">
价格1:<input type="text" v-model.number="price1"><br>
价格2:<input type="text" v-model.number="price2"><hr>
总价格:<font>{{ test }}</font><br>
总价格:<font>{{ sum }}</font>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
data(){
return{
el:'#demo',
price1:'',
price2:'',
sum:''
}
},
computed:{
test(){
return this.price1 + this.price2;
}
},
watch:{
price1(newPrice1,oldPrice1){
this.sum = newPrice1 + this.price2;
},
price2(newPrice2,oldPrice2){
this.sum = newPrice2 + this.price1;
}
}
}
</script>
<style scoped>
</style>运行结果：
七、路由
- 路由 就是访问地址
-
后端路由 接口的访问地址就是后端路由
-
存在一个后台接口 @RequestMapping("/user/login")
-
/user/login 就是这个后台接口的路由
-
-
前端路由 就是组件的访问地址
-
通过前端路由 可以找到唯一的一个组件
-
vue项目中 src > router > index.js vue项目默认配置前端路由的位置
-
//导入vue 导入的内容不添加具体的路径,默认就是从第三方模块导入的 import Vue from 'vue' //导入路由 import Router from 'vue-router' //导入需要配置路由的组件 (单文件的拓展名可以省略不写) //有多少个组件需要配置路由就可以导入多少个组件 import He from '../components/he.vue' import Hello from '../components/Hello' // 将路由对象和vue进行绑定,在Vue项目中路由就可以正常生效了 Vue.use(Router) //创建Router(路由)对象,配置具体的路由 //export default 导出 export default new Router({ //mode表示路由模式 ,hash切换路由的时候会有个 " # " //选择haistory切换路由的时候,不存在 " # " //不添加mode参数的时候,默认是hash mode:'hash/history', routes: [ { // path就是具体的访问路径,compnent就是这个访问地址所匹配的组件 path: '路由', name:'路由名字 目前没啥用可以不写', component: 组件名字 }, { path: '/hello', component:Hello } ] }) -
如果path的值 是 / 这个路由 就叫做 根路由
-
根路由 所匹配的组件 会默认替换掉 App.vue(主组件)中的 <router-view> 标签
-
八、router-link
1-router-link的概述
-
router-link 类似html中的a标签 可以实现路由的切换
-
a标签是跳转整个网页
-
router-link 是切换组件
-
-
<router-link to="具体的路由”> 文本 </router-link>
2-实例代码
<template>
<div>
<h1>
欢迎来到Hello.vue组件!!
</h1>
<br>
<router-link to="/">跳转到计算器</router-link>
</div>
</template>运行结果：
九、router-view
router-view 是子路由占位符
格式：
routers:[
{
path:'路由',
name:'路由名字 目前没有啥用,可以不写',
component:组件名字 ,
children:[//里面配置的路由就叫做子路由
{
path:'路由',
name:'路由名字 目前没有啥用,可以不写',
component:组件名字
},
{
path:'路由',
name:'路由名字 目前没有啥用,可以不写',
component:组件名字
}
]
},
{
}
...
]- router-link 进行跳转的时候,如果是同级路由,当前组件就会被跳转路由所指向的组件所替换掉
- 页面上使用router-link的时候,可以同时使用router-view
- 如果router-link跳转的路径是子路由 子路由所匹配的组件就会将当前组件中的router-view给替换掉
案例：
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '../components/Layout'
import WelCome from '../components/WelCome'
import Country from '../components/Country'
import Out from '../components/Out'
import Favioute from '../components/Favioute'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
mode:'history',
component: Layout,
children:[{
path: '/welcome',
component:WelCome
},{
path: '/out',
component:Out
},{
path: '/favioute',
component:Favioute
}
]
}
]
})
layout.vue
<template>
<div>
<header>
<!-- 导航条 -->
<nav >
<ul>
<!-- 导航条效果 :key 作用是为了提高渲染效率
单文件组件中 使用v-for的时候 :key必须写
给渲染出来的每一个标签绑定一个唯一标识
当已经渲染后的数据发生改变的时候 页面需要重写渲染
根据 key的值判断是否需要重写渲染 key的值没有变化的标签 是不需要重写渲染的
-->
<li>
<!-- 如果 to不是从 data 中取数据,就不用加 ":" -->
<router-link to="/welcome">首页</router-link>
</li>
<li>
<router-link to="/favioute">我的收藏</router-link>
</li>
<li>
<router-link to="/rank">收藏排行榜</router-link>
</li>
</ul>
</nav>
</header>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
export default {
data(){
return{
nav:''
}
},
created(){
this.$http.get('http//location:80/text/show').then(res=>{
this.nav = res.data.data
})
}
}
</script>
<style scoped>
ul{
width: 90%;
}
ul>li{
display: inline;
margin-left: 20px;
}
</style>
分别在welcom.vue,bank.vue...里面添加文字
运行结果：
十、redirect重定向
redirect 负责路由的重定向，访问到根路由的时候 可以通过 redirect参数 直接跳转到某一个子路由
例如：以上案例，当没有重定向时，刚打开文件，只显示链接，没有下面的内容
这时候我们想要让他刚打开页面就显示首页，就可以用到重定向，只需要在index.js中添加以下语句
当我们再打开时，他就显示首页
十一、router.js中引入组件的方式
方式一：
import 组件名字 from '组件具体路径'
export default new Router({
routes: [
{
path: '路由,
component: 组件名字
}
]
})方式二：
export default new Router({
routes: [
{
path: '路由,
component:() => import('组件的路径');
}
]
})十二、路由模式
路由模式有两种hash和history
hash 路由（是默认值） ⼀般会携带 ⼀个 # 号，不够美观；
history 路由不存在这个问题
十三、组件拆分
将组件进行拆分，需要的时候就导入
例如如上案例中，layout标签中有header和main两部分，可以将header和main单独拆出来，分别为Header.vue和Main.vue
实例代码：
<template>
<div id="layout">
<Header></Header>
<Main></Main>
</div>
</template>
<script>
import Header from '@/layout/Header'
import Main from '@/layout/Main'
export default {
data(){
},
components:{ //组件注册
Main, // Main:Main
Header //Header:Header
}
}
</script>
<style scoped>
</style>值得注意的是：组件注册不能和已有的标签名一样
组件名和已有的标签名<main></main>相同报错信息
十四、MPA-SPA
MPA是多页面应用：就是项目中存在着多个html页面
SPA是单页面应用：就是项目中只有一个html页面，通过切换组件的方式切换页面，vue项目就是一个单文件项目
两者之间的区别：
| SPA | SPA | |
|---|---|---|
| 组成 | 一个页面和多个片段页面 | 多个页面 |
| 页面跳转刷新 | 效率高 （切换页面仅仅是切换组件，局部刷新） | 效率低（整页刷新） |
| 首屏加载速度 | 速度慢 （访问首页的时候 会加载html、main.js 、APP.vue 、 router.js、根路由对应的组件 ） | 速度快 （只加载首页的html文件 及相关的异步操作即可 ） |
| SEO搜索引擎优化 | 难实现 | 容易实现（MPA html文件比较多 ） |
| 维护成本 | 相对容易 | 相对复杂 |
| 服务器压力 | 相对较小 （单页面应用在跳转时只需刷新局部资源） | 相对较大 （多页面应用每次跳转时都需要加载完整的页面资源） |
| url路由模式 | hash模式（有#） | history模式（没有#） |
| 数据传递 | 容易（全局变量Vue或Vue中的父子组件通讯props对象） | 麻烦（依赖url、cookie或者localstorage） |
十五、VUE项目中集成axios
-
安装axios
-
npm install axios
-
-
main.js中引入axios
-
import axios from 'axios'
-
-
main.js中将axios和vue进行集成 集成之后 即可全局使用axios
-
Vue.prototype.$http= axios;
-
-
组件中使用axios
-
this.$http.post
-
实践：
使用：
2918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
