Vue项目开发配置与基本使用
金蝶云社区-艾贺521
艾贺521
18人赞赏了该文章 955次浏览 未经作者许可,禁止转载编辑于2018年11月05日 15:03:06
封面


最近两年越来越多的前端项目都在使用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


注:

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


赞 18