web之vue+vue-router+jquery 以传统模式开发单页面应用

前段时间要做一个混合开发 h5+Android，以及微信公众号开发，商城模块+订单模块由h5开发，想着若以vue-cli开发的话实在不方便，不需要那么多的依赖，每次有不同的页面入口，又要重新更换默认路由和打包，很是麻烦，所以本人就想这时用传统页面或许更简单一些，不要抛弃传统~。

1. good.html

5. 

8. · {{i}}新概念英语

9. 第一册·lesson 1 a private

10. 2017-11-25

11. ￥298购买

2.新建一个good.js文件，注册一个组件

1. goods.js

1. const List = function(resolve, reject) {
2. $.get('good.html').then(function(res) { // 注意$.get(url)
3. resolve({ // 这里是构造一个component
4. template: res,
5. data: function() {
6. return {
7. list: [],
8. }
9. },
10. mounted: function() {
12. },
13. methods: { // 注意此时在methods 里面 function 不可简写 ，必须写成一下形式
14. transferRoute: function() {
15. this.$router.push({
16. path: '/detail/1'
17. });
18. },
19. }
21. });
22. })
23. }

3.新建一个file.js文件（这个文件不是必须的，本人只是为了规范化，也可以直接在index.html页面直接引入相应的js文件）

1. file.js

1. // goods 模块
2. document.write('');
3. document.write('');

4.新建一个route.js文件，配置路由

1. // 路由配置（和vue-cli一样）
2. const routes = [
3. { path: '/', component: List },
4. { path: '/list', component: List }, // 注意 !这里的List 就是good.js里面实例 List，以下同理
5. { path: '/detail/:id', component: Detail },
6. ];
8. // 实例化路由
9. const router = new VueRouter({
10. routes
11. });

5.最后一步，是在入口文件index.html 中引入主要的文件，和实例化vue,以及挂载路由。