最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我特地针对初学者整理一套前端学习资料
// 引入element-plus
import ElementPlus from ‘element-plus’
// 引入对应的样式
import ‘element-plus/theme-chalk/index.css’
createApp(App).use(ElementPlus).mount(‘#app’)
除了全局引入组件外，还可以引入部分组件，从而减少打包体积。
3、直接在组件中使用
ElementPlus按钮
更多 Element Plus 相关内容请前往官网：
此处不做展开。
三、引入路由 Vue-Router
Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得更加简单。
1、安装
npm install vue-router@4 -S
2、在 src 下新建 router 文件夹，且新建一个文件 index.js
可使用如下指令构建最简单的结构（也可在项目中直接创建）。
cd ./src
mkdir router
cd ./router
touch index.js
3、index.js 中的简单内容
import { createRouter, createWebHashHistory } from ‘vue-router’
const routes = [
{
path: ‘/’,
redirect: ‘/componentA’
},
{
path: ‘/componentA’,
name: ‘componentA’,
component: () => import(‘…/components/ComponentA.vue’)
},
{
path: ‘/componentB’,
name: ‘componentB’,
component: () => import(‘…/components/ComponentB.vue’)
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
4、在 main.js 中引入 router
// …
import router from ‘./router’
createApp(App).use(ElementPlus).use(router).mount(‘#app’)
5、在 App.vue 使用
四、引入状态管理器 Vuex
作为 Vue 的全家桶之一，Vuex 必不可少，其采用集中式存储，管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1、安装
npm install vuex -S
2、在 src 下新建 store 文件夹，且新建一个文件 index.js
可使用如下指令构建最简单的结构（也可在项目中直接创建）。
cd ./src
mkdir store
cd ./store
touch index.js
mkdir ./module
cd ./module
touch moduleA.js
3、在建立好目录结构后，补充对应文件中的简单内容
index.js
import { createStore } from “vuex”
import { moduleA } from “./modules/moduleA”
export const store = createStore({
// Vuex允许将store分割成模块（module），每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
// 访问moduleA的状态：store.state.moduleA
modules: {
moduleA
}
})
moduleA.js
export const moduleA = {
// 默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的，如果希望模块具有更高的封装度和复用性，可以通过添加namespaced:true的方式使其成为带命名空间的模块
namespaced: true,
state: {
testState1: 0
},
getters: {
testGetter1: state => {
return state.testState1;
}
},
mutations: {
testMutation1(state) {
state.testState1++;
}
},
actions: {
testAction1(context) {
setTimeout(() => {
context.commit(‘testMutation1’);
}, 1000);
}
}
}
4、在 main.js 中引入 store
// …
import { store } from ‘./store’
createApp(App).use(ElementPlus).use(router).use(store).mount(‘#app’)
5、在对应组件中进行使用
更多 Vuex 相关内容请参考：
此处不做展开。
除了 Vuex，可以跟 Vue3 搭配使用的还有另外一个状态管理工具：Pinia。感兴趣的朋友请戳： Pinia 上手指南 – 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？_前端不释卷leo的博客-CSDN博客
五、引入 Axios
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ios
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
