置信当初有很多人在用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 ./srcmkdir storecd ./storetouch index.jsmkdir ./modulecd ./moduletouch 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 ./srcmkdir routercd ./routertouch 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.jsimport 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的最小原型零碎，而后就能够在此基础上依据业务需要进行迭代。