vue学习笔记

Posted 2020-09-16 栖木

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