共计 4613 个字符，预计需要花费 12 分钟才能阅读完成。
置信当初有很多人在用 Vue3.0 开发我的项目，然而很多时候没有机会从零开始搭建一个我的项目，毕竟只有负责人才会有机会将框架给咱们搭建进去，而后咱们在此基础上进行业务迭代、模块开发，明天就一起来从零搭建一个 Vue3.0 的最小原型零碎，让人人都具备从零开启一个我的项目的能力。
一、我的项目初始化
既然用 Vue3.0 构建最小原型零碎，那么必定要用尤大的最新构建工具 Vite 来进行我的项目的初始化，初始化指令如下所示：
npm init vite@latest初始化后的目录构造如下所示：
注：后面已写了 Vite 相干文章，可点开链接浏览坚固好忘性不如烂笔头——Vite 篇
二、引入 UI 框架
Vite 曾经帮忙咱们实现了我的项目的初始化，下一步就是引入 UI 框架，毕竟 UI 框架帮忙咱们造了很多轮子，省去了很多工作，进步开发效率。在 Vue3.0 中，用的比拟多的 UI 框架有 Element Plus，上面就一步步引入该 UI 框架。
- 装置 element-plus 包
npm install element-plus -S- 在 main.js 文件中全局引入
import {createApp} from 'vue'
import App from './App.vue'
// 引入 element-plus 包
import ElementPlus from 'element-plus';
// 引入对应的款式
import 'element-plus/theme-chalk/index.css';
const app = createApp(App);
app
.use(ElementPlus)
.mount('#app')- 全局引入后即可在对应的组件中应用
注：除了全局引入组件外，还能够引入局部组件，从而缩小打包体积。
三、引入状态管理器 Vuex
作为 Vue 的配套内容，Vuex 必不可少，其采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。上面就一起引入 Vuex。
- 装置对应的 vuex 包
npm install vuex -S- 在文件夹下建设对应的文件目录，按如下指令执行即可构建其最简略构造
cd ./src
mkdir store
cd ./store
touch index.js
mkdir ./module
cd ./module
touch moduleA.js
- 在建设好目录构造后，依照如下文件即可实现对应文件中的内容
(1) index.js 文件
// index.js 文件
import {createStore} from "vuex";
import {moduleA} from "./module/moduleA";
export const store = createStore({
// Vuex 容许将 store 宰割成模块（module），每个模块领有本人的 state、mutation、action、getter、甚至是嵌套子模块
// 拜访 moduleA 的状态：store.state.moduleA
modules: {moduleA}
});（2）moduleA.js 文件
// module/moduleA.js 文件
// 对于模块外部的 mutation 和 getter，接管的第一个参数是模块的部分状态对象
// 对于模块外部的 action，部分状态通过 context.state 裸露进去，根节点状态则为 context.rootState
// 对于模块外部的 getter，根节点状态会作为第三个参数裸露进去
// 在带命名空间的模块内拜访全局内容
// 如果心愿应用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四个参数传入 getter，也会通过 context 对象的属性传入 action
// 若须要在全局命名空间内散发 action 或提交 mutation，将 {root: true} 作为第三个参数传给 dispatch 或 commit 即可。export const moduleA = {
// 默认状况下，模块外部的 action、mutation 和 getter 是注册在全局命名空间的，如果心愿模块具备更高的封装度和复用性，能够通过增加 namespaced:true 的形式使其成为带命名空间的模块
namespaced: true,
state: {
testState1: 'xxxx',
testState2: {
a: 0,
b: 1
},
testState3: 0
},
// 有的时候须要从 store 中的 state 中派生出一些状态，此时能够将该局部形象出一个函数供多处应用。// Vuex 容许在 store 中定义 getter，像计算属性一样，getter 的返回值会依据它的依赖被缓存起来，且只有当他的依赖值产生了扭转才会被从新计算
getters: {
// getter 接管 state 作为其第一个参数
testGetter1: state => {return state.testState1 + state.testState3;},
// getter 能够承受其余 getter 作为第二个参数
testGetter2: (state, getters) => {return getters.testGetter1.length;}
},
// 更改 Vuex 的 store 中的状态的惟一办法是提交 mutation，每个 mutation 都有一个字符串的事件类型和一个回调函数，该回调函数接管 state 作为第一个参数，提交的载荷作为第二个参数
// 以相应的 type 调用 store.commit 办法来触发相应的回调函数
// Mutation 必须是同步函数
mutations: {testMutation1(state) {
// 变更状态
state.testState3++;
},
// 第二个参数是载荷
testMutation2(state, payload) {state.testState1 += payload.content;}
},
// Action 提交的是 mutation，而不是间接变更状态
// Action 能够蕴含任意异步操作
// Action 函数承受一个与 store 实例具备雷同办法和属性的 context 对象，因而能够调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。// Action 通过 store.dispatch 办法触发
actions: {testAction1(context) {setTimeout(() => {context.commit('testMutation1');
}, 1000);
},
testAction2({commit}, payload) {setTimeout(() => {
commit({
type: 'testMutation2',
content: payload.content
});
}, 1000);
}
}
};- 而后在 main.js 文件中引入该局部内容
// ……
import {store} from './store';
const app = createApp(App);
app
.use(store)
.use(ElementPlus)
.mount('#app')- 而后在对应组件中进行应用，具体具体应用内容能够看此处内容
用最简的形式学 Vuex
四、引入路由 Vue-Router
Vue Router 是 Vue.js 官网的路由管理器。它和 Vue.js 的外围深度集成，让构建单页面利用变得大海捞针，上面就在我的项目中引入 Vue-Router。
- 装置对应的 vue-router 包
npm install vue-router@4 -S- 在文件夹下建设对应的文件目录，按如下指令执行即可构建其最简略构造
cd ./src
mkdir router
cd ./router
touch index.js- 在 index.js 文件中欠缺对应的内容
import {createRouter, createWebHashHistory} from 'vue-router';
const routes = [
{
path: '/',
redirect: '/component1'
},
{
path: '/component1',
name: 'component1',
component: () => import('../components/Component1.vue')
},
{
path: '/component2',
name: 'component2',
component: () => import('../components/Component2.vue')
}
];
const router = createRouter({history: createWebHashHistory(),
routes
});
export default router;- 在 main.js 中引入 router
// ……
import router from './router';
const app = createApp(App);
app
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')- 在 App.vue 文件中应用 <router-view></router-view> 组件，这样就能够依据路由拜访不同内容了
<script setup>
</script>
<template>
<router-view></router-view>
</template>五、引入自定义插件
自定义插件在很多状况下也必要重要，后面曾经有对应章节论述了如何自定义插件（Vue3.0 插件执行原理与实战)，咱们仅须要在 src 下创立 plugins 目录搁置本人的自定义插件即可。
六、API
纯前端我的项目真的很少，多多少少都会与后端进行交互，以后支流我的项目中与后端罕用 Axios 库，该库帮忙咱们做了很多事件，节俭了很多造轮子的工夫（具体 Axios 应用能够浏览已经的文章三步法解析 Axios 源码)。上面就让咱们一起一步步设计本人的申请 API：
- 装置 axios
npm install axios -S- 进一步封装 axios 的申请（封装形式千万条，抉择适宜本人的就好）
// /src/utils/request.js
import axios from 'axios';
const service = axios.create({
baseURL: '/api',
timeout: 9999
});
// 申请拦截器
service.interceptors.request.use(
config => {
// 做一些申请前的解决，例如增加一些头信息、token 信息等
return config;
},
error => {return error;}
);
// 响应拦截器
service.interceptors.response.use(
response => {// 依据响应做一些解决，例如将响应信息存储到 store 中等},
error => {return error;}
);
export default service;- 而后在 src 目录下建设 api 文件，外面就是与业务逻辑相干的申请，例如如下所示:
import service from "../utils/request";
export const testPost = data => {
return service({
url: '/base',
method: 'post',
data
});
};至此，曾经实现了 Vue3.0 的最小原型零碎，而后就能够在此基础上依据业务需要进行迭代。
正文完
