相信很多人都在用Vue3.0开发项目，但是很多时候并没有机会从头开始搭建一个项目。毕竟只有负责人才有机会把框架给我们搭建起来，然后我们再在此基础上进行业务迭代和模块开发。今天，我们将从零开始搭建一个Vue3.0的最小原型系统，让大家具备从零开始一个项目的能力。1.项目初始化由于使用Vue3.0构建最小原型系统，因此需要使用友达最新的构建工具Vite来初始化项目。初始化指令如下：npminitvite@latest初始化后的目录结构如下：注：之前写过一篇Vite相关的文章，大家可以点击链接阅读，巩固好记忆还不如作为烂笔头——VitePart2.介绍UI框架Vite已经帮助我们完成了项目的初始化。接下来就是介绍UI框架了。毕竟UI框架帮我们造了很多轮子，节省了很多工作，提高了开发效率。在Vue3.0中，使用较多的UI框架是ElementPlus，下面将逐步介绍UI框架。1、安装element-plus包npminstallelement-plus-S2。introduceimport{createApp}from'vue'importAppfrom'./App.vue'//在main.js文件中全局导入element-plus包from'element-plus';//引入对应的样式import'element-plus/theme-chalk/index.css';constapp=createApp(App);app.use(ElementPlus).mount('#app')全局导入后，就可以在对应的组件中使用了。注意：除了全局导入组件外，还可以导入部分组件来减少打包体积。3.引入状态管理器Vuex作为Vue的配套内容。Vuex是必不可少的。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。让我们一起来介绍一下Vuex。1.安装对应的vuex包npminstallvuex-S2。在该文件夹下创建相应的文件目录，执行以下指令构建其最简单的结构cd./srcmkdirstorecd./storetouchindex.jsmkdir./modulecd./moduletouchmoduleA.js3。建立目录结构后，对应文件中的内容可根据以下文件实现(1)index.js文件//index.js文件import{createStore}from"vuex";import{moduleA}from"./module/moduleA";exportconststore=createStore({//Vuex允许把store分成模块，每个模块都有自己的state、mutation、action、getter，甚至嵌套的子模块//访问moduleA的状态：store.state.moduleA模块：{moduleA}});(2)moduleA.js文件//module/moduleA.js文件//对于模块内部的mutation和getter，接收到的第一个参数是模块的本地状态对象//对于模块内部的action，本地状态是通过context.state暴露的，根节点状态是context.rootState//对于模块内部的getter，根节点状态会作为第三个参数暴露出来//在有命名空间的模块中访问全局内容//如果你要使用全局状态和getters，rootState和rootGetters会作为第三个和第四个参数传入getter，同时也会通过context对象的属性传入action//如果要在action中分发action或者提交mutations全局命名空间，将{root:true}作为第三个参数传递给分派或提交。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);}}};4.然后在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。1.安装对应的vue-router包npminstallvue-router@4-S2。在该文件夹下创建相应的文件目录，并执行以下指令构建其最简单的结构cd./srcmkdirroutercd./routertouchindex。js3。完善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});导出默认路由器；4.在main.js中引入router//...importrouterfrom'./router';constapp=createApp(App);app.use(store).use(router).use(ElementPlus).mount('#app')5.使用App.vue文件中的组件，这样可以根据路由访问不同的内容
