微信公众号网页项目开发，基于VUE技术栈的尝试

发表于 | 分类于

前言

  1. 天，我的域名终于能正常访问了，一头雾水摸索了半天，在阿里云控制台上左点点右点点，搞了一个免费的证书，OH我的宝贝网站肥来了~
  2. 这几个月公司持续有很多事情去做，加上谈恋爱初期，时间被幸福和忙碌冲刺，少有新的领域涉及，少有时间整理，这一条当然是这几个月缺失博文的借口
  3. 其实公司的前端一直在用JQUERY开发，相关的技术栈现在的年轻人听到都觉得“啊！好老”，我悄悄觉得很汗颜，作为公司前端部门负责人，没办法吸引新的血液为公司效力，是我的失败。而在职公司PC端基于jquery已经有比较成熟的体系，改造起来成本比较大，相反移动端的技术框架一直没有怎么定型，所以就先从手机端入手尝试使用所谓的新一点的技术。
  4. 有幸进入了【公众号：前端早读课】组织的一个读书群，做了一段时间的话痨，以及基于一些数据的统计，目前市面上流行的前端技术包含Vue,React等，在职的公司是一个稳步发展，小而美的类型，考虑到Vue在国内解决方案更成熟，决定基于Vue选型技术栈

前提

在本机上安装配置好npm, vue-cli

技术栈确认

vue.js更像是js或者jquery在一个项目中的身份；相继需要确认的是UI框架：我们决定使用jquery-weui，因为本来就是微信公众号的网页项目，而且拿使用者比例数据来说话的话，它也比较突出，所以没咋纠结就确认好了、图标：我们还是决定使用font-awesome文字图标库、页面跳转：vue-router、项目构建：webpack、…(待补充呀)
综上，最终确定的技术栈：vue+vue-router+webpack+jquery-weui+fontawesome

项目搭建过程

  1. 初始化vue+webpack项目【danica001】
    在项目文件夹下执行如下命令:

    1
    vue init webpack danica001

    创建过程及结果参考如下：
    我在这个过程中顺便安装了vue-router
    效果图
    项目文件夹说明：
    效果图
    入口文件夹内容说明：
    效果图
    然后按照To get srarted 去运行模板项目：
    效果图
    效果图

  2. 引入jquery和jquery-weui
    在package.json里加入依赖：
    效果图
    然后在集成终端执行命令： npm install ,进行安装
    添加webpack静态模块打包器，在build目录下的webpack.base.conf.js里加入：

    1
    var webpack = require("webpack")

    在build目录下的webpack.base.conf.js里的module.exports的最后加入：

    1
    2
    3
    4
    5
    6
    7
    plugins: [
     new webpack.optimize.CommonsChunkPlugin('common.js'),
     new webpack.ProvidePlugin({
         jQuery: "jquery",
         $: "jquery"
     })
    ]

    全局使用css：
    在main.js顶部导入weui样式

    1
    import 'jquery-weui/dist/css/jquery-weui.min.css'

    使用js：
    在需要用到组件文件顶部导入使用，具体使用细节查看weui的文档

    1
    2
    3
    import $ from 'jquery'
    import weui from 'jquery-weui/dist/js/jquery-weui.min'
    import picker from 'jquery-weui/dist/js/city-picker.min'

  3. 引入font-awesome
    npm 安装font-awesome 以及需要的所有依赖:

    1
    npm install less less-loader css-loader style-loader file-loader font-awesome --save-dev

    全局使用css：
    在main.js顶部导入fontawesome样式

    1
    import 'font-awesome/css/font-awesome.min.css'

    在html中正常使用即可

技术点思考

  1. 路由传参方式
    html代码：

    1
    <router-link :to="{name:'Index', params:{user:'123'}}"><a class="back"><i class="fa fa-times"></i></a></router-link>

    Index.vue代码：

    1
    2
    3
    4
    5
    6
    7
    <script>
    export default {
      created() {
          console.dir(this.$route.params.user)
      }
    };
    </script>

  2. 全局变量存储
    创建文件Global.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script>
    var userInfo;
    function setUserInfo(user) {
      userInfo = user;
    }
    function getUserInfo() {
      return userInfo ? userInfo : '-';
    }
    export default {
      setUserInfo,
      getUserInfo
    }
    </script>

    在main.js中导入并设置全局变量

    1
    2
    import global_ from './components/Global'
    Vue.prototype.GLOBAL = global_

    在其它组件中使用

    1
    2
    this.GLOBAL.setUserInfo('danica')
    this.GLOBAL.getUserInfo() => danica

结语

内容待丰富