vue快速原型开发,vue原型方法
本文主要介绍Vue3.x最小原型系统的讲解。由于Vue3.0是用来搭建最小原型系统的，所以必须用最新的搭建工具Vite，特别大，来初始化项目。下面举例，有需要的朋友可以参考一下。
目录
一、项目初始化二。UI框架介绍1。安装element-plus包2。状态管理器vuex1的全球介绍。安装相应的Vuex包2。指令执行结构3。对应文件4中内容的实现。main.js文件中内容4的介绍，Route Vue-RouterVue1。安装相应的vue路由器包2。在文件夹下建立相应的文件目录，3。完善index.js文件4中的相应内容。在main.js文件中引入router5，在App.vue文件中使用component 5，引入自定义插件6，api1。安装axios2。进一步封装axios请求3。在3.src目录下建立API文件。
今天我们就从零开始搭建一个Vue3.0的最小原型系统，让每个人都可以从零开始一个项目。
我相信现在很多人都在用Vue3.0开发项目，但是很多时候都没有机会从零开始搭建一个项目。毕竟只有负责人才会有机会为我们搭建框架，然后我们在此基础上迭代开发模块。今天我们就从零开始搭建一个Vue3.0的最小原型系统，让每个人都有从零开始做项目的能力。
一、 项目初始化
由于Vue3.0是用来搭建最小原型系统的，所以必须用最新的搭建工具Vite，特别大，来初始化项目，前言：。
npm初始化邀请@最新
初始化指令如下所示：
二、引入UI框架
Vite已经帮助我们完成了项目的初始化，下一步就是引入UI框架。毕竟UI框架帮我们造了很多轮子，省了很多工作，提高了开发效率。在Vue3.0中，常用的UI框架是Element Plus，我们将一步步介绍这个UI框架。
1.安装element-plus包
npm安装元素加S
2.在main.js文件中全局引入
从“vue”导入{ createApp }
从导入应用程序。/App.vue
//引入element-plus包
从“element-plus”导入ElementPlus
//引入相应的风格
导入“element-plus/theme-chalk/index . CSS”；
const App=create App(App)；
应用。使用(ElementPlus)。挂载(#app)
在全局引入后，它可以在相应的组件中使用。
初始化后的目录结构如下所示：除了全局引入组件，还可以引入部分组件，从而减少封装体积。
三、引入状态管理器Vuex
作为Vue的配套内容，Vuex必不可少。它使用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式根据相应的规则进行更改。下面我们一起来介绍一下Vuex。
1.安装对应的vuex包
npm安装vuex -S
2.指令执行结构
在文件夹下建立相应的文件目录，执行下面的指令就可以构造出最简单的结构。
光盘。/src
mkdir商店
光盘。/商店
触摸index.js
mkdir。/模块
光盘。/模块
触摸moduleA.js
3.实现对应文件中的内容
目录结构建立后，对应文件中的内容可以根据以下文件实现
注：
//index.js文件
从“vuex”导入{ createStore }；
从“”导入{moduleA}。/module/moduleA ；
export const store=createStore({
//Vuex允许将存储划分为模块，每个模块都有自己的状态、变异、动作、getter甚至嵌套的子模块。
//访问moduleA: store.state.moduleA的状态
模块：{
模块a
}
});
(1) index.js文件
//模块/moduleA.js文件
//对于模块内部的突变和getter，收到的第一个参数是模块的局部状态对象。
//对于模块内部的动作，通过context.state公开局部状态，根节点状态为context.rootState
//对于模块内部的getter，根节点状态将作为第三个参数公开。
//访问命名空间为的模块中的全局内容
//如果要使用全局状态和getter，那么rootState和rootGetters将作为第三和第四个参数传入getter，也将通过context对象的属性传入action。
//如果需要在全局命名空间中分发动作或提交变异，只需将{root: true}作为第三个参数进行分派或提交即可。
导出常量模块A={
//默认情况下，模块内部的action、mutation和getter都注册在全局命名空间中。如果希望模块具有更高的封装性和可重用性，可以通过添加namespaced:true使其成为具有名称空间的模块。
命名空间：对，
状态：{
测试状态1:“xxxx”，
测试状态2: {
答：0，
乙：1
},
测试状态3: 0
},
//有时需要从存储区中的状态派生一些状态。这时候这部分就可以抽象成一个函数多用途了。
//Vuex允许在存储中定义getter。和计算属性一样，getter的返回值会根据其依赖关系进行缓存，只有当其依赖关系值发生变化时才会重新计算。
getters: {
//getter接收状态作为其第一个参数
testGetter1: state={
返回state . test state 1 state . test state 3；
},
//getter可以接受其他getter作为第二个参数
testGetter2: (state，getters)={
返回getters . test getter 1 . length；
}
},
//改变Vuex的存储中的状态的唯一方法是提交突变。每个变异都有一个字符串和回调函数的事件类型，回调函数接收状态作为第一个参数，提交的有效负载作为第二个参数。
//调用相应类型的store.commit方法，触发相应的回调函数。
//突变必须是同步函数
突变：{
testMutation1(状态){
//更改状态
state.testState3
},
//第二个参数是负载
测试变异2(状态，有效负载){
state . test state 1=payload . content；
}
},
//动作提交突变，而不是直接改变状态。
//Action可以包含任何异步操作。
action函数接受与store实例具有相同方法和属性的context对象，因此您可以调用context.commit来提交变异，或者通过context.state和context.getters来获取状态和getters
//操作由store.dispatch方法触发。
动作：{
测试操作1(上下文){
setTimeout(()={
context . commit( test mutation 1 )；
}, 1000);
},
测试操作2({提交}，有效负载){
setTimeout(()={
提交({
类型：“测试变异2”，
内容：有效负载
});
}, 1000);
}
}
};
4.在main.js文件中引入内容
(2)moduleA.js文件
然后在相应的组件中使用它。详情请参考这里的内容。
//……
从导入{store}。/store ；
const App=create App(App)；
应用。使用(存储)。使用(ElementPlus)。挂载(#app)
用最简单的方法学习Vuex
四、引入路由Vue-RouterVue
路由器是Vue.js的官方路由管理器.它与Vue.js的核心深度集成，可以轻松构建单页面应用。下面介绍如何将Vue-Router引入到项目中。
1.安装对应的vue-router包
npm安装vue-路由器@4 -S
2.在文件夹下建立对应的文件目录，
最简单的结构可以通过执行以下指令来构建
光盘。/src
mkdir路由器
光盘。/路由器
触摸index.js
3.在index.js文件中完善对应的内容
从“vue-router”导入{createRouter，createWebHashHistory }；
常量路由=[
{
路径：“/”，
重定向：“/component1”
},
{
路径：“/component1”，
名称：“组件1”，
组件：()=导入(./components/Component1.vue )
},
{
路径：“/component2”，
名称：“组件2”，
组件：()=导入(./components/Component2.vue )
}
];
const router=createRouter({
history: createWebHashHistory()，
路线
});
导出默认路由器；
4.在main.js中引入router
//……
从导入路由器。/router ；
const App=create App(App)；
应用。使用(存储)。使用(路由器)。使用(ElementPlus)。挂载(#app)
5.在App.vue文件中使用组件
这样就可以根据路由访问不同的内容。
脚本设置
/脚本
模板
路由器视图/路由器视图
/模板
五、引入自定义插件
定制插件在许多情况下也是必要和重要的。上一章已经讲了如何定制插件(Vue3.0插件执行原理和实战)。我们只需要在src下创建插件目录来放置我们自己的定制插件。
六、API
纯前端的项目真的很少，多多少少会和后端有互动。目前主流项目普遍使用Axios库配合后端，帮助我们做了很多事情，节省了很多搭建轮子的时间(具体Axios使用，可以看之前的文章三步法分析Axios源代码)。让我们一步一步地设计我们自己的请求API:
1.安装axios
npm安装axios -S
2.进一步封装axios的请求
然后在main.js文件中引入上部分内容：
///src/utils/request.js
从“axios”导入axios；
const service=axios.create({
baseURL:“/API”，
超时：9999
});
//请求拦截器
service . interceptors . request . use(
配置={
//做一些请求前的处理，比如添加一些头信息，令牌信息等。
返回配置；
},
错误={
返回错误；
}
);
//响应拦截器
服务.拦截器.响应.使用(
响应={
//根据响应做一些处理，比如把响应信息存储到存储中等等。
},
错误={
返回错误；
}
);
导出默认服务；
3.src目录下建立api文件，
(封装方式千万条，选择适合自己的就好)
导入服务自./utils/request ；
导出常量测试后=数据={
退货服务({
URL:“/base”，
方法： post ，
数据
});
};
至此，Vue3.0的最小原型系统已经完成，接下来可以根据业务需求进行迭代。
本文关于Vue3.x最小原型系统的讲解到此为止。更多关于Vue3.x最小原型系统的解释，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。