从0开始，教你如何用Vue开发答题，App01项目创建及答疑设置页开发

项目演示项目演示项目源码项目源码配套讲解视频配套讲解视频教程讲解本教程适合对Vue基础稍有了解，但又不知道如何操作的人用的比较全面，没用过Vue从头开发过小App。本教程并没有讲解所有的Vue知识点，而是从0到1一步步做一个完整的小项目。他们正在推出一个大型开源项目。初级读者下载下来之后，运行起来都非常困难，更别说一步步了解这个项目是怎么开发的了。本教程试图填补这一空白。一、项目初始化1.1使用VueCLI创建项目如果你还没有安装VueCLI，请执行以下命令进行安装或升级：npminstall--global@vue/cli在命令行输入以下命令创建Vue项目:vue创建vue-quizVueCLIv4.3.1？Pleasepickapreset:>default(babel,eslint)手动选择featuresdefault:默认勾选babel和eslint，回车后直接输入包才会进入包，默认选择第一种。安装完成后，命令会提示项目创建成功。按照命令行提示，在终端输入：#进入你的项目目录cdvue-quiz#启动开发服务npmrunservestart成功后，命令行会输出项目的http访问地址。打开浏览器，输入任意一个地址访问，如果可以看到页面，恭喜，项目创建成功。1.2初始目录结构项目创建完成后，我们来看一下初始目录结构：1.3调整初始目录结构，实现游戏设置页面生成的默认目录结构不符合我们的开发需求，所以进行一些自定义修改必需的。这里我们主要处理以下内容：删除初始化的默认文件添加并调整我们需要的目录结构删除默认的示例文件：src/components/HelloWorld.vuesrc/assets/logo.png修改package.json，添加项目依赖：“依赖项”：{“axios”：“^0.19.2”，“bootstrap”：“^4.4.1”，“bootstrap-vue”：“^2.5.0”，“core-js”：“^3.6。5","vue":"^2.6.11","vue-router":"^3.1.5"},"devDependencies":{"@vue/cli-plugin-babel":"~4.4.0","@vue/cli-plugin-eslint":"~4.4.0","@vue/cli-plugin-router":"~4.4.0","@vue/cli-service":"~4.4.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","vue-template-compiler":"^2.6.11"}，然后运行??yarninstall安装依赖项。修改项目入口文件main.js，引入bootstrap-vue。从'vue'导入Vue从'./App.vue'导入应用程序从'./router'导入路由器从'bootstrap-vue'导入'bootstrap/dist/css/bootstrap.css'导入'bootstrap-vue/dist/bootstrap-vue.css'Vue.config.productionTip=falseVue.use(BootstrapVue)conststate={questions:[]}newVue({router,data:state,render:h=>h(App)}).$mount('#app')定义一个state对象共享答案数据（答案页和结果页共享）conststate={questions:[]}src下新增eventBus.js消息总线directory，用于组件间通信传递消息，代码如下：importVuefrom'vue'constEventBus=newVue()exportdefaultEventBus修改App.vue，省略css样式，请参考源码代码。添加components/Navbar.vue，定义导航部分在src目录下添加router/index.js定义首页路由。importVuefrom'vue'importVueRouterfrom'vue-router'importMainMenufrom'../views/MainMenu.vue'Vue.use(VueRouter)constroutes=[{name:'home',path:'/',component:MainMenu}]constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})exportdefaultroutersrc添加views/MainMenu.vue，MainMenu主要包含GameForm组件。新增加src/components/GameForm.vue，现实游戏初始设置。GameForm组件，主要通过axios发起请求获取所有主题类别：axios.get('https://opentdb.com/api_category.php')添加src/components/LoadingIcon.vue，当异步请求数据未返回时，渲染等待图标添加src/assets/ajax-loader.gif等待动画文件，请参考项目源码。1.4运行项目yarnrunserve备注本系列文章首发于作者微信公众号[豆John]，想尝试新鲜事物的朋友请搜索关注微信。有问题可以加我微信【tiantiancode】一起讨论。最后为了以后找我