【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 三 ) （建议收藏）

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

export default {

name: ‘HelloWorld’,

data () {

return {

msg: ‘欢迎Vue’

}

}

}

4、如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

1、我们在HelloWorld.vue的同级目录下新建两个Student和User组件。

---

2、Student.vue和User.vue组件

Student.vue组件

hello world {{msg}}

我是学生管理的主页

User.vue组件

hello world {{msg}}

我是用户管理的主页

3、在App.vue组件中引入这两个组件的链接，进行路由切换

自定义脚手架

主页

用户管理

学生管理

4、启动项目，测试一下

17、在脚手架中使用axios

---

17.1、安装axios

1.安装axios

npm install axios --save

2.配置main.js中引入axios

import axios from ‘axios’;

Vue.prototype.$http=axios;

3.使用axios

在需要发送异步请求的位置:this.$http.get("url").then((res)=>)this.$http.post(“url”).then((res)=>{})

---

18、Vue Cli脚手架项目部署

---

1.在项目根目录中执行如下命令:

npm run build

注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

2.打包之后当前项目中变化

在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

19、webstorm开发vue cli项目

---

19.1、简介

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

19.2、安装

官网地址：http://www.jetbrains.com/webstorm/

选择好安装路径

19.3、使用webstorm

webstorm和idea同属于一家开发公司，因此使用方式基本一样。

使用webstorm初始化项目

1、我们新建一个webstromcodes项目。

2、打开Terminal终端，输入vue init webpack vue_day5 ，进行vue-day5项目的创建。

3、接下来的步骤和使用Vue Cli脚手架开发一样。

4、显示如下页面，项目初始化成功。

可以看下目录结构，和使用Vue CLI脚手架开发目录结构一致。

5、在Terminal终端输入cd vue_day5，进入当前项目根目录，项目目录中包含package.json才是根目录，可以输入dir查看当前目录结构。

6、最后我们输入npm run dev启动项目，出现如下界面：

说明项目成功运行！！！输入http://localhost:8080 ，打开浏览器查看一下，出现默认界面。

main.js 项目中主入口

//引入vue.js

import Vue from ‘vue’

//引入app.vue 组件

import App from ‘./App’

//引入router目录中 /index.js

import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’, //指定vue实例作用范围

router,

components: { App },

template: ‘’

})

19.4、开发vue cli项目(一)

1、Student组件

template>

{{ msg }}

4、index.js

import Vue from ‘vue’

import Router from ‘vue-router’

//@ 代表src目录

import HelloWorld from ‘@/components/HelloWorld’

import User from ‘@/components/User’

import Student from “…/components/Student”;

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘HelloWorld’,

component: HelloWorld

},

{

path: ‘/user’,

name: ‘user’,

component: User

},{

path: ‘/student’,

name: ‘student’,

component: Student

}

]

})

启动项目测试一下：

成功查询到数据！！！

19.5、开发vue cli项目(二)

20、VueX 状态管理

---

20.1、简介&安装

1.简介

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2.安装vuex

• npm install vuex --save

3.创建vue cli中创建store文件夹

4.在stroe中创建index.js文件

import Vue from ‘vue’

import Vuex from ‘vuex’

//1.安装vuex

Vue.use(Vuex);

//2.创建store对象

const store = new Vuex.Store({

});

//3.暴露store对象

export default store;

5.在main.js中引入stroe并注册到vue实例

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import store from “./stroe”;//引入store

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’,

store,//注册状态

})

20.2、state属性

1.state属性

• 作用: 用来全局定义一些共享的数据状态

2.语法

const store = new Vuex.Store({

state:{

counter:0,//定义共享状态

},

}

3.使用

{{KaTeX parse error: Expected 'EOF', got '}' at position 20: …e.state.counter}̲} ===> {{this.store.state.counter}}

20.3、mutations 属性

1.mutations 属性

• 作用: 用来定义对共享的数据修改的一系列函数

2.语法

const store = new Vuex.Store({

state:{

counter:0,//定义共享状态

},

mutations:{

//增加

increment(state){

state.counter++

},

//减小

decrement(state){

state.counter–

}

}

});

3.使用

this.$store.commit(‘decrement’);

this.$store.commit(‘increment’);

4.mutations传递参数

• a.定义带有参数的函数

mutations:{

//addCount 参数1:state 对象 参数2:自定义参数

addCount(state,counter){

console.log(counter);

return state.counter += counter ;

}

}

• b.调用时传递参数

this.$store.commit(‘addCount’,11);

20.4、getters 属性

1.getters 属性

• 官方: 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据

它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• 作用: 用来定义对共享的数据的计算相关的一系列函数 相当于 computed 属性 会对结果进行缓存

2.语法

getters:{

//平方

mathSqrts(state){

console.log(“--------”);

return state.counter*state.counter;

},

//乘以一个数字

mathSqrtsNumber(state,getters){

return getters.mathSqrts*3;

},

//传递参数

mathSqrtsNumbers(state,getters){

return function (number){

return number;

}

}

}

3.使用

•   1.{{$store.getters.mathSqrts}}
  

• 2.{{$store.getters.mathSqrtsNumber}}

• 3.{{$store.getters.mathSqrtsNumbers(3)}}

---

20.5、练习

index.js

import Vue from ‘vue’ //vue.js

import Vuex from ‘vuex’ //vuex.js

//1. vue中使用vuex

Vue.use(Vuex);

//2. 创建store对象

export default new Vuex.Store({

//state: 用来定义所有组件共享的数据

state:{

counter:0,

},

//mutations: 用来定义对共享数据的修改方法

mutations:{

incrCounter(state){

state.counter++;

},

decrCounter(state){

state.counter–;

},

incrCounterCount(state,count){

state.counter += count;

},

},

//getters: 相当于store共享数据计算属性，该计算属性中方法只会执行一次，只有计算属性值发生变化才会重新计算，相当于之前的computed属性

getters:{

incrCount(state){ //二次渲染计算

return state.counter + 10;

},

match(state,getters){

return getters.incrCount * 2;

}

}

});

User.vue

用户管理--{{this.$store.state.counter}}--{{this.$store.getters.incrCount}}--{{this.$store.getters.match}}

<input type=“button” value=“点我修改共享数据counter++” @click=“changeStoreCounter”>

<input type=“button” value=“点我修改共享数据counter–” @click=“decrStoreCounter”>

<input type=“button” value=“点我修改共享数据counter+5” @click=“changeStoreCounterFive”>

添加用户信息

编号 姓名 年龄 工资

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
ter+5" @click=“changeStoreCounterFive”>

添加用户信息

编号 姓名 年龄 工资

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-IFc8blkD-1713215207665)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！