从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简单画出上中下结构页面，其中上、下部分不变，中间部分通过路由加载进来（使用<routerview/>作为接收器）；
⑧在main.js中配置vue、vue--router、element-ui、axios引用，axios需要特殊处理；
⑨新建server文件，与项目同级，使用nodejs编写简易接口返回json数据；
⑩在app.vue中编写点击事件，通过axios请求接口数据并打印，如果成功输出，则初步上手完成。
网友评论