Vue相关

作者: 小学生的博客 | 来源:发表于2017-03-13 14:27 被阅读17次

    Vue.js 是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计。

    一直在用vue 脚手架把玩项目。

    记录下流程:
    ①部署node环境,安装node.js
    ②安装cnpm淘宝镜像,
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    ③安装vue-cli脚手架模版
    cnpm install -g vue-cli
    ④全局安装 webpack
    cnpm install webpack -g
    ⑤创建vue项目
    vue init webpack mydemo(mydemo项目名称)
    ⑥安装依赖
    cd mydemo
    cnpm install
    npm run dev
    当当当当,一个崭新的vue项目完成
    会自动打开浏览器,默认端口号:8080
    可以自行在config/index.js中修改端口号。
    ⑦编译
    npm run build
    自动生成一个dist文件夹。包含一个static 和index.html
    ⑧nginx部署
    下载 nginx
    解压 文件,编辑nginx/conf 下的nginx.conf

    nginx

    启动nginx ,直接双击 nginx.exe
    浏览器输入 http://127.0.0.1:8080/ 或者 http://localhost:8080

    完美运行

    • 如何解决history 模式下 刷新页面404问题
         location / {
                root   D:\site\webpos;    //项目路径
                try_files $uri $uri/ /index.html;
            }
    
    

    使用express搭建静态服务

    mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上。
    具体方法:

    创建 mock 文件夹
    build/dev-server.js 中添加如下代码

    image.png

    Vue 生命周期


    生命周期 image.png

    为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如:


    v-if & v-show区别
    v-if 插入or删除。
    一般来说,v-if有更高的切换消耗。v-show有更多的初始化渲染消耗。
    因此对需要频繁切换而对安全性无要求,使用v-show
    如果在运行时,条件不可能改变使用 v-if

    [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
    Vue 中的 v-cloak 解读

    "active-class" 属 性

    这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

    <router-link :to="/home" active-class="u-link--Active">Home</router-link>
    active-class属性的默认值是router-link-active,所以如果没有设置,就会被渲染为这个class

    可以在router.js里面设置
    const router = new VueRouter({
    mode: 'hash',
    linkActiveClass: 'u-link--Active', // 这是链接激活时的class
    })

    路由中常常会携带参数。http://xxx,com/detail?id=2
    对于参数唯一的,
    <a v-link="{path:'/detail/001'}">新闻001</a>
    <a v-link="{path:'/detail/002'}">新闻002</a> //跳转链接后面带参数

       {
          path: '/detail/:id',
          name: 'detail',
          component: Detail,
        },
    

    获取参数方法let id = $route.params.id
    优化后 http://xxx,com/detail/2


    参考资料
    element
    react.js,angular.js,vue.js学习哪个好?
    新手向:Vue 2.0 的建议学习顺序
    React还是Vue:你该如何选择?
    windows下vue+webpack前端开发环境搭建及nginx部署

    相关文章

      网友评论

          本文标题:Vue相关

          本文链接:https://www.haomeiwen.com/subject/irrfnttx.html