标签: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
标签:org project init 项目 logs 应用 参考 scss 开源项目
原文地址:http://www.cnblogs.com/wengXiaofeng/p/6802361.html