Vue项目开发配置与基本使用
金蝶云社区-艾贺521
艾贺521
19人赞赏了该文章 1,125次浏览 未经作者许可,禁止转载编辑于2018年11月05日 15:03:06
summary-icon摘要由AI智能服务提供

本文介绍了Vue框架在前端项目中的流行及其易用性,提及饿了么在Vue基础上进行的封装。作者分享了基于Vue的框架在公司内部开发的使用经验,包括配置node源、安装依赖、启动项目、编写页面等步骤,还涉及修改端口、配置菜单和请求后端接口的操作。最后,建议参考Vue官方文档以深入学习Vue相关知识点。


最近两年越来越多的前端项目都在使用Vue,其简单,易用,容易上手,受到很多开发者的青睐。国内饿了么在Vue基础上又做了层封装,使其开发起来更加便捷,对于企业内部只会写后端的前端小白简直太有福利了。这次我根据公司内的基于Vue的框架开发做一次介绍说明,希望起到抛砖引玉的作用来帮助大家开始使用Vue项目。



配置与使用


  1. 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中是否有这个脚本命令。

image.png



4. 根据业务的要求,编写你所需要的页面。如果是已经存在的项目,可以参考项目内已有的文件,如果是全新的项目,那么后面我们再多写一些Vue相关的文章,Vue的语法很简单。



5. 如果我们启动的端口与本地端口存在冲突,想要修改项目启动的端口,那么一般项目的config目录下会有index.js里面修改启动端口。如下


image.png


6. 开发的时候,要配置项目的菜单,一般在constants目录下面,或者在某个目录下有menu.js文件,修改其目录内容,这部分相信大家都能看得懂,不多赘述了。


image.png


7.  如果要请求后端的接口,那么一般在api.js中定义像后端请求的接口。在要使用的文件中,引入api.js然后调用

image.png



结束

这次先说下Vue项目的搭建与基本的配置,在使用的时候会用到许多vue的相关知识点,一般我们会参考官方文档,参考链接放在下面。



参考

Vue官方参考 https://vuejs.org/v2/guide/instance.html


注:

本文独家发布自金蝶云社区


图标赞 19
19人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!