【WEB前端全栈成长计划】第三阶段 考核开发实录（一）

    经过了一段时间的学习，终于进入到【WEB前端全栈成长计划】第三阶段的最终考核了，这次考核，主要是用vue来搭建华为云的教学平台首页(https://classroom.devcloud.huaweicloud.com/home)和MOOC课堂(https://classroom.devcloud.huaweicloud.com/home/course/cloudclassroom)，这两个页面，首先说一下，这套开发实录，主要记录的是一个开发的思路过程，中间会穿插一些代码，但不会把每一行代码怎么写都讲一遍，主要说的还是一个流程要点和思路。

    下面开始我们的开发吧~

    先来说说搭建项目：

    由于考核要求使用vue2.6.0的版本，但是被我本地的vue-cli脚手架生成的vue框架源码的vue是2.5.2版本的，所以我把package.json里vue的版本手动改成了2.6.0的，然后运行npm install，重新安装了一遍依赖。

    这里拓展一部分内容，就是vue-cli 3.0以下版本的安装使用和卸载以及vue-cli 3.0以上版本的安装使用和卸载的一些命令：

    vue-cli 3- 版本的安装方法、使用方法以及卸载方法
    //全局安装
    npm install -g vue-cli
    //版本查看
    npm -V
    //构建项目
    vue init webpack vue_demo
    //进入项目目录
    cd vue_demo
    //安装项目依赖
    npm install
    //启动项目
    npm run dev
    浏览器访问地址：http://localhost:8080/
    //卸载
    npm uninstall vue-cli -g

    vue-cli 3+ 版本的安装方法、使用方法以及卸载方法
    //全局安装
    npm install @vue/cli -g
    //安装指定版本
    npm install -g @vue/cli@3.11.0
    注意：如果原来已经安装了vue-cli的话需要先卸载原来的安装，卸载方法见上方。
    //安装依赖
    npm install
    //本地启动
    npm dev
    npm run serve
    //打包
    npm run build
    //卸载
    npm uninstall @vue/cli -g

    拓展内容说完了，我们来说一下项目结构：

    我用的IDE是HBuilderX，用什么IDE都可以哈，自己用着舒服就行。看上面的截图，开发基本的内容，脚手架都已经配置好了，准备工作已经做好了，下面我们进入开发环节。

    备注，本文只是记录一下开发流程，以及主要用到的技术，不会逐条代码的去推进哈~

    大家注意上面的截图里，有个components目录，这个目录下面，主要放置一些组件，而且是非路由组件，路由组件，一般情况下我们会在src下新建个目录叫做views/pages，用户放置路由类的组件。

   【WEB前端全栈成长计划】第三阶段 考核开发实录的第一部分就先到这里吧，主要说了使用vue-cli搭建项目，文章太长了阅读体验感太差了，我就不写太长，下一篇文章，我们来说下路由的使用。