Vue.js 相关问题

在尝试了微信小程序后，看了看vue.js的文档，发现两者还是有很多相似的地方，就尝试了一下vue.js，做了个简单的列表和详情，尝试路由，组件化，请求，打包等功能。下面介绍下我在尝试过程中遇到的问题和解决办法。

1.整体项目搭建

在尝试静态页引入vue.js后，通过npm搭建了vue的项目，这些网上搜的教程中都会有，主要的问题是在搭好的项目中，没有路由的模块和请求的模块和webpack，需要单独安装。否则是无法配置路由和用请求的。

2.项目目录

通过脚手架搭建的项目已经把大部分文件搭建完成，其余的部分按照功能划分 
                                                     


其中，main.js是整体的入口文件，assets中放的是图片文件，components中放的是公共的组件，目前只用到了2个组件，头文件和轮播组件。views中是路由页面，通过路由切换的页面都在views中。router是路由控制的js文件。有不合理的地方希望看到的人指出，谢谢！

3.组件

在这个尝试项目中 我引入的是由饿了么前端做的mint-ui,而且暂时只用到了轮播组件。。如果有好用的组件希望大家推荐一下，谢谢！

4.自定义组件尝试

自己写的组件需要包在template中，然后比较重要的一点，组件内容必须有一个根节点，就是一定要有个div节点，然后内容在这里面拓展，否则会报错，图片分别为报错信息，错误代码和正确代码。







自定义的小组件可以封装到一个大组件中，下图中引入了轮播组件和头文件组件，通过import进来引入拼装。



然后在app.vue中通过同样的方式引入，就可以显示出来自己的组件了。（Swiper是通过mint-ui做的，具体可查看官方文档）

5.配置路由

首先需要在入口文件main.js中引入路由文件，如图所示：



其中 router的路径按照自己项目路径中配置。然后在router下配置相应的路由路径，如图所示：



这里有一个困扰我很久的问题，需要提示一下，一定要把/*的路由放在最后一个，要不会出现路由链接已经跳转了，但是路由页面却无法跳转的问题。个人认为他是按照顺序匹配的，*是所有跳转规则都符合，所以会一直显示*下的路由页面。一定要注意！

6.请求数据并通过路由跳转

首先确定是否安装了vue-resource，确定后，我的代码如下：


其中getList为请求的方法，Indicator这个组件方法在mint-ui中，具体查看官方文档，是显示加载中风火轮的组件，这里通过jsonp请求，防止跨域问题，（如果未安装vue-resource，this下是没有$http的，所以一定要确保安装），parseList为数据处理，吧处理好的数据放在data中的dataList中，就可以在模板中循环遍历渲染页面了。这里就跟微信小程序相似了，不细说了，具体可查看官方文档。
另外一个就是困扰我的另外一个问题，如何用路由跳转，我这里的解决方法请看代码：
                                                  

 
                         
这里是跳转方法 通过拼接好路由路径，push到$router中进行路由跳转，获取id方法如下            
                   


这里定义了点击事件，把id传入到了点击事件中来获取id，后面的data-newsId有么有用我也不清楚。。。没有尝试去掉。。。
到这里就可以进行页面跳转了，下图为本demo的跳转的效果图：

  7.打包

打包通过npm命令打包就好了，npm run build 就可以在dist下看到自己的文件了，这里可能会出现打包后无法访问的问题，可以尝试下把config下的index.js中的assetsPublicPath:'/' 改为assetsPublicPath:' . ',然后重新打包 尝试，
我的问题是这么解决的。

8.放到服务器上

打包完成的文件我直接放到了tomcat下的webapps中 直接访问index就可以查看了。（好像设置在config的index下的端口号并没有影响，我的是3030，我文件放在端口号为8080的tomact下了，不过我还运行着一个3030的tomcat，不知道有没有影响）
至此，vue的第一步尝试就算完成了，如果本文中有说的不对，不合理，有错误的地方，请及时指出，一定积极改正，谢谢！