vue+elementui学习之旅（1）

从17年就开始关注vue相关技术栈，但基于项目技术选型，一直没有在正式项目中使用，我也没有真正用vue框架写过项目。这次疫情在家远程办公，正好有个项目归我负责，就想趁此机会把vue应用到实战。

为了更好更快的走上正轨，今日特意邀请表弟来我家向他学习（他已经有过好几个相关项目经验，还获得了鹅厂的offer，这种资源必须好好利用，哈哈）。

先简要介绍下自身前端知识情况：

①有html和css基础，能独自完成c#传统模式web前端开发（包括pc端和移动端）；

②有js及jquery工具使用经验；

为了使用vue框架，断断续续进行了一些知识补充：

①学习es6基础知识；

②学习vue基础知识；

③学习vscode开发工具及相关插件；

下面介绍下今天如何通过vue和elementui搭建我的项目：

①安装vscode、nodejs；

②在磁盘中新建项目文件夹，并拖入到vscode中；

③在vscode的控制台使用npm方式安装vue、vue-router、element-ui、axios；这一步默认会生成app.vue、main.js、package.json、components等文件。其中app.vue是项目主入口，main.js进行各种插件引用控制、package.json主要是项目的各种依赖库配置文件。（这里有个小知识点：^代表使用插件最新版本，～代表使用插件最合适的版本，其中vue插件我们需要去掉^，使用固定版本，升级最新版本可能导致不兼容。）

④在根目录下新建vue.config.js文件，里面配置访问服务器接口相关内容（代理、跨域、地址转换等）；

⑤在component文件夹下建立**.vue页面，拖入elementui组件；

⑥在根目录下新建router文件夹，并新建index.js文件，用来控制路由，导入**.vue页面，并设置好名字和路径；

⑦app.vue中通过elementui简单画出上中下结构页面，其中上、下部分不变，中间部分通过路由加载进来（使用作为接收器）；

⑧在main.js中配置vue、vue--router、element-ui、axios引用，axios需要特殊处理；

⑨新建server文件，与项目同级，使用nodejs编写简易接口返回json数据；

⑩在app.vue中编写点击事件，通过axios请求接口数据并打印，如果成功输出，则初步上手完成。