• vue学习笔记


    撸了一段时间的vue代码,趁现在脑子还清醒,总结一波我的学习成果,首先奉上最最重要,开发过程中最离不开的vue2.0api : http://cn.vuejs.org/v2/api/

    1,vue开发环境的搭建,我是通过vue-cli构建的项目,安装好node.js,利用其提供的npm命令来安装vue-cli。

    安装完成后(详细开发坏境的搭建可以访问 :http://www.cnblogs.com/wengXiaofeng/p/6780301.html),依次输入以下的命令:

    (1)npm install -g vue-cli:全局安装vue-cli

    (2)vue init webpack my-project: 利用vue-cli在目录地址生成一个基于webpack的名为’my-project‘的Vue项目文件及目录

    (3)cd my-project:打开刚刚创建的文件夹

    (4)npm intall:安装项目所依赖的包文件

    (5)npm run dev:利用本地node服务器在浏览器中打开并浏览项目页面

    这样我们的一个基于webpack的vue项目目录就构建好了。(以上命令可以用cnpm代替npm)

    2,除了vue-cli,你还需要学习的Vue技术栈

    (1)vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。

    (2)SASS/SCSS: 强大的css扩展语言,可以帮助开发者很方便地书写css样式;安装node-sass和sass-loader,在vue文件style标签使用scss的话,添加lang="scss"即可

    (3)vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。

    (4)ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。

    (5)NPM:node.js的包管理工具,用于同一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。

    (6)webpack:一款强大的文件打包工具,可以将我们的前端项目文件同一打包压缩至js中,并且可以通过vue-loader等加载器实现语法转化与加载。

    (7)vue-resource/axios:发起网络请求,相当于ajax,用于前后台的数据交互;vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios

    利用以上等技术,我们便可以开始构建我们的Vue项目了。

    3,vue-cli跨域问题可以通过proxyTable解决,具体参考api https://vuejs-templates.github.io/webpack/proxy.html

    4,在使用axios用post向后台传输数据时,后台都不能正确接受我们传过去的数据,需要用到nodeJs的querystring 处理post过去的数据

       具体用法参考以下代码:

    var qs=require('querystring')
    this.axios.post(postUrl,qs.stringify({type:'a'})).then(res => {console.log(res) })
    

     5,推荐最近用的两个好用的vue插件:

    (1)vue-awesome-swiper:vue.js触摸滑动组件(多用于轮播图的实现) https://github.com/surmon-china/vue-awesome-swiper

    (2)VueCircleMenu :漂亮的vue圆环菜单 https://github.com/OYsun/VueCircleMenu

    (3)Babel :一款将ES6代码转化为浏览器兼容的ES5代码的插件

    6,Vue相关开源项目库汇总 :https://github.com/opendigg/awesome-github-vue

     

  • 相关阅读:
    ROS工业机器人 ROSI Kinetic培训课程
    伺服电机电流、速度、位置环控制
    人工智能入门书单
    更新 Ubuntu 系统,避免报错「校验和不符」
    arduino+16路舵机驱动板连接测试
    Visual SLAM算法:2010年至2016年的回顾
    roslink
    java——自动装箱拆箱
    java_四大流
    Java反射
  • 原文地址:https://www.cnblogs.com/wengXiaofeng/p/6802361.html
Copyright © 2020-2023  润新知