本文介绍了Vue框架在前端项目中的流行及其易用性,提及饿了么在Vue基础上进行的封装。作者分享了基于Vue的框架在公司内部开发的使用经验,包括配置node源、安装依赖、启动项目、编写页面等步骤,还涉及修改端口、配置菜单和请求后端接口的操作。最后,建议参考Vue官方文档以深入学习Vue相关知识点。
最近两年越来越多的前端项目都在使用Vue,其简单,易用,容易上手,受到很多开发者的青睐。国内饿了么在Vue基础上又做了层封装,使其开发起来更加便捷,对于企业内部只会写后端的前端小白简直太有福利了。这次我根据公司内的基于Vue的框架开发做一次介绍说明,希望起到抛砖引玉的作用来帮助大家开始使用Vue项目。
配置与使用
Vue是基于js的,通常情况下会依赖node,使用npm来安装,有的公司可能会配置node源,那么首先配置node源,这样下载node包的时候就会快很多了。
方式一:npm install --registry=http://r.npm.10101111.com/ ,后面的地址记得要改为自己可以访问的源
方式二:编辑本地目录下的.npmrc文件,内容如下,注意这是在文件中,文件名为.npmrc
registry=http://r.npm.10101111.com/
2. 安装依赖的安装包
npm install
3. 如果依赖包安装完毕,那么使用npm start来启动项目,注意这里要看package.json的script中是否有这个脚本命令。
4. 根据业务的要求,编写你所需要的页面。如果是已经存在的项目,可以参考项目内已有的文件,如果是全新的项目,那么后面我们再多写一些Vue相关的文章,Vue的语法很简单。
5. 如果我们启动的端口与本地端口存在冲突,想要修改项目启动的端口,那么一般项目的config目录下会有index.js里面修改启动端口。如下
6. 开发的时候,要配置项目的菜单,一般在constants目录下面,或者在某个目录下有menu.js文件,修改其目录内容,这部分相信大家都能看得懂,不多赘述了。
7. 如果要请求后端的接口,那么一般在api.js中定义像后端请求的接口。在要使用的文件中,引入api.js然后调用
结束
这次先说下Vue项目的搭建与基本的配置,在使用的时候会用到许多vue的相关知识点,一般我们会参考官方文档,参考链接放在下面。
参考
Vue官方参考 https://vuejs.org/v2/guide/instance.html
注:
本文独家发布自金蝶云社区
推荐阅读
您的鼓励与嘉奖将成为创作者们前进的动力,如果觉得本文还不错,可以给予作者创作打赏哦!
请选择打赏金币数 *