菜单

Vue-cli搭建项目

2019年5月25日 - Ajax

近日在折磨有vue做开垦,在此之前也用过,然则超越四分之二皆以用一些简短的多寡绑定。踏了累累坑,总括了弹指间,希望对刚刚发轫折腾的伴儿有赞助。

第一步 vue-cli

常见难点1:用vue-cli搭好情况以往,本地域名和测试意况的域名不均等,怎么跨域访问后台接口?

vue-cli安装非常轻易,它为我们节省了无数webpack配置文件。
vue-cli的运用请查看

在config目录下找到index.js,在dev下增加如下:

# 安装 vue-cli
npm install -g vue-cli

# 初始化 webpack 项目
vue init webpack my-project
cd my-project
# npm可能出现访问速度极慢的情况,推荐使用cnpm
npm install
#安装 vux 发版请使用 npm install vux@next
npm install vux
#安装less-loader, vuejs-templates模板默认不安装less less-loader
npm install less less-loader --save-dev
# 调试
npm run dev
proxyTable: {
  '/api':{//指定以/api开头的接口都走代理
   target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
   changeOrigin:true,//支持跨域
   pathRewrite:{
    '/api':''
   }
  }
 },

看一下扭转的目录文件:

以上的配置其实是dev-server 使用了老大强劲的 http-proxy-middleware
包。更加的多高等用法,请查阅其文书档案。

build文件夹是npm run build之后营造的build文件,以及部布满署文件,
config文件夹放的是一些陈设文件。
static故名思义是静态文件。
index.html是主页面,当然那些中唯有二个div节点名称叫app。
最着重的是src文件夹:
这里面的多少个文本夹assets
存放静态文件,比如图片等,说澳优下,vue一般是把css写在各类vue中的
components是组件,贰个页面能够精通为由许多众多的零件组成的。
app.vue便是首要的页面,能够精通为把这一个组件组合起来的文本。
main.js其实是用来组合app.vue 和index.html
ok 我们npm run dev来看看。

请求/api/getGame实际发出去的央浼是 https://yhhdtest.moguyun.com/getGame

安插1个适用于本地和生产条件的后台请求

遵守地方的计划好现在,本地情状足以成功的跨域和后台交互了。但是各个接口前面都要加二个本来不需求的/api前缀,这么些实在和大家延续祖宗门户是不相符的。那一年要求大家做一些陈设,通过编写翻译来差别。

在index.js下各自找到dev和prod(有的项目恐怕一贯抽取来,单独成文件了)

dev.env.js

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api/"'
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'""'
}

关键点在于API_HOST,那年大家的呼吁能够这么写

process.env.API_HOST+'/getGame'

如上正是本文的全体内容,希望对大家的上学抱有帮忙,也希望我们多多支持脚本之家。

你恐怕感兴趣的小说:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图