vue项目创建及利用axios跨域

由于有另外一篇很详细的博客 所以这篇就挑选主要和精华的操作记录 方便那些想快速学习的人看

1.先下载vue-cli     npm install -g  vue-cli      如果没有npm 请先去安装node  里面包含的npm

2.vue init webpack  myvue    创建webpack版本的项目   然后根据需求选择  我这里vue-router选择的y 后面的验证都是n

3.npm install  读取package.json 里面记录的要求的模块 然后利用工具，我用的是hbulider 去打开一下这个项目 ，然后项目结构就是这个样子

4.跑一下项目看看  在cmd的项目路径下输入  npm run dev   后看到下图，说明你的项目已经跑起来了，在地址栏输入localhost：8080看看吧

5.打开页面后  你能看到图片和一堆连接  这里 项目结构 和为什么会显示这个 请参考另一篇我的另一篇博客

6.修改路由 我们想显示自己的主页  你会发现其实页面就是app.vue里面的内容，上面的img是logo 下面的router-view是内容

7.之所以内容是一堆连接是在路由中接了第一次的请求  /  所以我们修改请求  然后自己建一个新的首页，下面是对应文件的内容和项目结构，修改后你的首页就变了

8.然后我在我们的home页面模拟一个假数据  准备做2个连接 利用路由去完成跳页

先测试一个跳会app首页的  我们进行如下编辑  在home下添加假的json数据 然后利用router-link将代码包裹 变成超链接，然后修改路由文件，根节点加入一个新的路由 去接phone的请求 然后查看页面效果  发现页面整个替换  ，依旧是单页应用 只不过一直替换app.vue文件中的router-view  （这里我在路由下的index.js里添加了mode：history，是为了让我的请求不在有/# 当然 你这么做势必最造成和后台对接的问题，记住做个404页面就行，遇到我们再截图啦）

然后我们再测试一个 在home下的嵌套页面，（啥意思？刚才是替换app.vue的东西 也就是把home都换了，现在是在home里换他自己身上的东西）请求都是从home页面送出去的 现在 我在我的router路由文件夹下的home路由下添加子路由 /user,然后在home页面添加一个router-view  那么这个子路由就会在当前home页面去寻找router-view 如果找到就显示  找不到就不出来 但却不是去替换全局的app.vue下的router-view

9.好了 路由与子路由 还有路由的跳转就完事了 当然我们有的时候路由还要传递参数  所以 我们可以利用phone那个例子传递一下参数  请求页多写部分请求  路由页用：id方式起json的key   最终页面用{{$route.params.gq}}在页面接值，或者如果想在js里面接值 就用变量接一下   jsData：this.$route.params.gq

10 接传值也搞定后  我们说说跨域取值

我利用nodejs的express框架 写了一个项目 有一个/user/userList的接口 可以返回一堆user数据  这里我们使用vue2推荐的axios去跨域请求    先下载axios 然后在main.js里引入axios  然后Vue.prototype.$ajax=axios去组装到vue上

然后在页面创建钩子函数created  调用methods里的方法  发送ajax请求  这里的请求需要做跨域处理   因为我们想自己开发前后台分离的项目   所以我从另一个ip下的端口下去取数据  配置代理的方法在后面

下图我们再config下的index.js里配置代理  其中web是我们自己起的别名  相当于用web去代替target里的地址  第二个参数表示是否开启跨域 true是开启   然后后面是要替换的地方  就是把所有/web开头的地方都弄没 然后换上target里的

到这里  我们的项目就接到了另一个项目的数据 下图的控制台 我们的data里就是另一个项目的数据  

11 利用element-ui 将数据循环  拆分组件  后面就是你项目部分了  

下载elementui   npm install  element-ui@legacy --save

然后在main.js里引入elementUi 并使用

页面循环数据 利用element

然后我们添加一个添加的方法 新建一个组件添加  addPage.vue

下面的this.$emit("user",user)是触发自己模板上的user时间 并传参给他 所以我们的user页面上要有这个事件

下面调用后 发送ajax去调用另一个项目的接口

如果你觉得我帮到你了，买个肥宅快乐水，怎么样？哈哈哈哈哈哈