码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习笔记

时间:2017-05-03 17:15:27      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:org   project   init   项目   logs   应用   参考   scss   开源项目   

撸了一段时间的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

 

 

 

vue学习笔记

标签:org   project   init   项目   logs   应用   参考   scss   开源项目   

原文地址:http://www.cnblogs.com/wengXiaofeng/p/6802361.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!