Vue单页应用 (用的vue-cli)

原创 zydty5061 随笔 随手记录 403阅读 2017-06-22 19:36:41 举报

首先学习的是用vue框架制作单页应用,vue-cli主要是用来生成项目架构的,ps:不能和vue搞糊涂了,直接用vue框架页面导入vue的js就可以了
这是用vue-cli 的webpack模板生成的项目目录

Vue单页应用(用的vue-cli)

1.安装vue-cli
在命令行输入 npm install vue-cli -g 全局安装
找一个文件夹 打开终端 输入 vue init webpack projectName
如 vue init webpack myFirstVue

Vue单页应用(用的vue-cli)
cd vueDemo进入项目代码根目录
npm install 安装项目依赖
npm run dev

2.项目结构
Index.html 项目的入口html
Static文件夹 静态资源放置的地方
Src 源代码 其中main.js是入口js文件

补充一下es6的模块化方法 import/export
Import : 导入
Export : 导出
导出: export default { //导出的内容 }
导入 : import 取名 from ‘ 路径’ import App from './App'

Vue文件:
一个vue文件由template,script, style三部分组成,象征着一个vue组件。

Vue单页应用(用的vue-cli)

这是router下的index.js

Vue单页应用(用的vue-cli)

一个完整的项目是肯定需要和后端通信的,所以我们需要一个ajax库,jquery提供了,我们可以不加载jq,而选择更配套的vue-resource包
使用:

  1. 安装 npm install vue-resource -S
  2. 在项目的main.js中导入 import VueResource from ‘vue-resource’
  3. 挂载到Vue上 Vue.use(VueResource)
  4. 使用他的接口:
    挂载后通过每个Vue实例的$http都可以使用vue-resource提供的接口

Vue单页应用(用的vue-cli)
this.$http.post(‘url’,{ //键值对
}).then(function(){//成功的回调},function(){//失败的回调})

跨域问题

在config目录下的index.js中修改proxyTable属性

Vue单页应用(用的vue-cli)
其中‘/table’属性映射一个路径,以后我们写xxxxxxxx/table/add时就只用写/table/add就可以了
那么又是如何解决跨域问题的呢?其实在上面的'/table'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复