zoukankan      html  css  js  c++  java
  • vue单页页面开发教程及注意事项

    如下图:
     
    1.安装node.js webpack
    node -v 查看版本
    webpack -v
    2.安装脚手架 vue-cli
    npm install -g vue-cli
    3. 在项目文件夹创建项目(如上图)
    vue init webpack-simple zbsq( )
    vue init webpack zbsq( ) npm install
    4.npm run dev 启动本地环境预览页面
    5.npm run build 打包文件
     
    常见问题:
    1.打包把js打包在一个文件,防止白屏现象(隐藏掉以下内容,最终打包在一个app.js文件)
    2.打包后js文件路径不对修改这里
    3.手机预览本地页面(修改node.js域名)
    我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用http://localhost:8081/访问的挺好的,但是换到ip就访问不了,期初我以为是代理的原因,将电脑的代理给关掉了。还是不行,然后改为127.0.0.1访问,发现可以访问,用0.0.0.0访问也可以,就是ip不行。然后就各种google,百度。别人家的方法---都试了好多,发现没效(有点怀疑人生,怀疑是不是我电脑的问题),但是结果就在这,ip就是不可以访问!!!!
          本着一个程序员的本能--不解决这个bug,誓不罢休的精神。我开始看自己的build文件, config文件。最终找到了根源----在config里面的index.js里面的module.exports下面的dev下面的host:'localhost' 改为 host:'0.0.0.0',就可以访问啦!!!然后开心愉快的开始码代码!!!!!!
    (注意:这里的ip地址最好用命令行查询本机ip 命令行:ipconfig/all)
    4.路由跳转
    this.$router.push('/drawPage?type='+typ+'&huodong='+huodon)
    5.全局变量使用
    (1)、存全局变量
    vm.$store.commit('updateType',type)
    vm.$store.commit('updateHuodong',huodong)
    (2)、取全局变量使用
    var typ = this.$store.state.type
    var huodon = this.$store.state.huodong
    (3)、全局变量文件
     
     
     补充版本(遇到的困难上述没有的,可继续看如下图)
     

  • 相关阅读:
    HTML5
    带参数
    类的无参方法
    类和对象
    Java新帮派——数组
    神竜出击 合三为一!
    校园欺凌——四位学生的乱伦之战!!!
    GC常见算法
    jstat
    SpringBoot2
  • 原文地址:https://www.cnblogs.com/xiaohuizhang/p/8615349.html
Copyright © 2011-2022 走看看