从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请求接口数据并打印,如果成功输出,则初步上手完成。