查看: 2263|回复: 0

[JavaScript/JQuery] vue+vue-router+jquery 以传统模式开发单页面应用

发表于 2018-3-17 08:00:01

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


开发技术
jquery + vue + vue-router + axios 开发流程
1.新建一个good.html 页面
  1. good.html
复制代码
  1. <div class="container list-page">
  2. <div class="box" v-for="i in 9" :key="i">
  3. <div class="item clearfix" @click="transferRoute">
  4. <div class=" item-img">
  5. <img class="good-img" src="./lib/images/01.jpg" alt="首页图片">
  6. </div>
  7. <div class="fl good-content">
  8. <h3 class="good-title"><em>· </em>{{i}}新概念英语</h3>
  9. <h5 class="good-name">第一册·lesson 1 a private</h5>
  10. <h5 class="good-time">2017-11-25</h5>
  11. <p><span class="good-money">¥298</span><span class="good-btn fr" @click.stop="shophandler()">购买</span></p>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
复制代码

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() {
  11. },
  12. methods: { // 注意此时在methods 里面 function 不可简写 ,必须写成一下形式
  13. transferRoute: function() {
  14. this.$router.push({
  15. path: '/detail/1'
  16. });
  17. },
  18. }
  19. });
  20. })
  21. }
复制代码

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

  1. file.js
复制代码
  1. // goods 模块
  2. document.write('<script src="./list/list.js" charset="utf-8"></script>');
  3. document.write('<script src="./list/details.js" charset="utf-8"></script>');
复制代码

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. ];
  7. // 实例化路由
  8. const router = new VueRouter({
  9. routes
  10. });
复制代码

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

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>商品页面</title>
  5. <meta http-equiv="content-type" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <!--css -->
  8. <!-- js -->
  9. <script src="./lib/js/jquery.js" charset="utf-8"></script>
  10. <!-- 先引入 Vue -->
  11. <script src="./lib/js/vue.js"></script>
  12. <script src="./lib/js/vue-router.js"></script>
  13. <!--file,如果上面没有把各模块的js文件整合到file.js文件,则逐个引入-->
  14. <script src="lib/js/file.js" type="text/javascript" charset="utf-8"></script>
  15. <!-- main.js -->
  16. <script src="lib/js/route.js" type="text/javascript" charset="utf-8"></script>
  17. </head>
  18. <body>
  19. <div id="app" class="container">
  20. <router-view></router-view>
  21. </div>
  22. <script>
  23. var vm = new Vue({ // 实例化vue,挂载路由
  24. router,
  25. }).$mount('#app');
  26. </script>
  27. </body>
  28. </html>
复制代码

好了,到这里就是一个传统开发模式下的单页面开发的流程,小记小记~,若各位有更好的方案,尽情赐教,小女子不胜感激~



回复

使用道具 举报