相信很多人都在用Vue3.0开发项目，但是很多时候并没有机会从头开始搭建一个项目。毕竟只有负责人才有机会把框架给我们搭建起来，然后我们再在此基础上进行业务迭代和模块开发。今天，我们将从零开始搭建一个Vue3.0的最小原型系统，让大家具备从零开始一个项目的能力。1.项目初始化由于使用Vue3.0构建最小原型系统，因此需要使用友达最新的构建工具Vite来初始化项目。初始化指令如下：npminitvite@latest初始化后的目录结构如下：注：之前写过一篇Vite相关的文章，大家可以点击链接阅读，巩固好记忆还不如作为烂笔头——VitePart2.介绍UI框架Vite已经帮助我们完成了项目的初始化。接下来就是介绍UI框架了。毕竟UI框架帮我们造了很多轮子，节省了很多工作，提高了开发效率。在Vue3.0中，使用较多的UI框架是ElementPlus，下面将逐步介绍UI框架。在main.js文件中全局安装element-plus包npminstallelement-plus-Simportimport{createApp}from'vue'importAppfrom'./App.vue'//引入element-pluspackageimportElementPlusfrom'element-plus';//全局引入后引入相应的样式import'element-plus/theme-chalk/index.css';constapp=createApp(App);app.use(ElementPlus).mount('#app')它可以在相应的组件中使用。注意：除了全局导入组件外，还可以引入一些组件来减少打包体积。3.引入状态管理器Vuex作为Vue的配套内容。Vuex是必不可少的。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。让我们一起来介绍一下Vuex。安装对应的vuex包npminstallvuex-S在文件夹下创建对应的文件目录，执行以下指令构建其最简单的结构cd./srcmkdirstorecd./storetouchindex.jsmkdir./modulecd./moduletouchmoduleA.js目录结构建立后，对应文件中的内容可根据以下文件实现(1)index.js文件//index.js文件import{createStore}from"vuex";import{moduleA}from"./module/moduleA";exportconststore=createStore({//Vuex允许将store分成模块，每个模块都有自己的state、mutation、action、getter，甚至嵌套子modules//访问moduleA的状态:store.state.moduleAmodules:{moduleA}});(2)moduleA.js文件//module/moduleA.js文件//对于模块内部的mutation和getter，接收到的第一个参数是模块的本地状态Object//对于模块内部的action，本地状态是通过context.state暴露的，根节点状态是context.rootState//对于模块内部的getter，根节点状态会暴露为第三个参数//命名带访问模块中的全局内容space//如果要使用全局state和getter，rootState和rootGetters会作为第三和第四个参数传入getter，也会通过context对象的属性传入action//如果需要全局命名要在空间中分发动作或提交突变，将{root:true}作为第三个参数传递给dispatch或commit。exportconstmoduleA={//默认情况下，模块内的动作、突变和getter都注册在全局命名空间中。如果想让模块有更高的封装性和复用性，可以加上namespaced:true使之成为一个带有命名空间的模块namespaced:true,state:{testState1:'xxxx',testState2:{a:0,b:1},testState3:0},//有时候需要从store中的state中导出一些状态，这时候可以把这部分抽象成一个函数来多次使用。//Vuex允许在store中定义getter。和计算属性一样，getter的返回值会根据其依赖关系缓存起来，只有当其依赖关系的值发生变化时才会重新计算。getters:{//getter接收状态作为它的第一个参数testGetter1:state=>{returnstate.testState1+state.testState3;},//getter可以接受其他getter作为第二个参数testGetter2:(state,getters)=>{returngetters.testGetter1.length;}},//在Vuexstore中改变状态的唯一方法是提交一个突变，每个突变都有一个字符串事件类型和一个接收状态作为第一个参数的回调函数，作为第二个参数提交//调用对应类型的store.commit方法触发对应的回调函数//Mutation必须是同步函数mutations:{testMutation1(state){//改变状态state.testState3++;},//第二个参数为payloadtestMutation2(state,payload){state.testState1+=payload.content;}},//Action提交变异而不是直接改变状态//Action可以包含任何异步操作//Action函数接受一个context对象，其方法和属性与store实例相同，因此可以调用context.commit来提交一个mutation，或者通过context.state和context.getters获取state和getters。//Action通过store.dispatch方法触发动作：{testAction1(context){setTimeout(()=>{context.commit('testMutation1');},1000);},testAction2({commit},payload){setTimeout(()=>{commit({type:'testMutation2',content:payload.content});},1000);}}};然后在main.js文件中引入这部分内容//...import{store}from'./store';constapp=createApp(App);app.use(store).use(ElementPlus).mount('#app')然后在相应的组件中使用它。具体可以参考这篇最简单的学习Vuex4.介绍路由Vue-RouterVueRouter是Vue.js官方的路由管理器。它与Vue.js的核心深度集成，可以轻松构建单页应用程序。接下来在项目中引入Vue-Router。安装对应的vue-router包npminstallvue-router@4-S在文件夹下创建对应的文件目录，执行以下指令构建其最简单的结构cd./srcmkdirroutercd./routertouchindex.js在index中完成对应.js文件中的内容import{createRouter,createWebHashHistory}from'vue-router';constroutes=[{path:'/',redirect:'/component1'},{path:'/component1',name:'component1',component:()=>import('../components/Component1.vue')},{路径:'/component2',名称:'component2',组件:()=>import('../components/Component2.vue')}];constrouter=createRouter({history:createWebHashHistory(),routes});exportdefaultrouter;introducerouterinmain.js//...importrouterfrom'./router';constapp=createApp(App);app.use(store).use(router).use(ElementPlus).mount('#app')在App.vue文件中使用
