PHPer快速上手VUE——边学边练1

    |     2019年5月3日   |   学习偶记   |     评论已关闭   |    349

本文面向的对象是熟悉php编程、变成中对象以及有jquery和js基础的计算机编程人员。因为本文是属于边学边练系列,就是我本人也不会,而是本人只是初步了解了vue的概念,然后要仿照别人的代码,做一个属于自己的代码的过程。所以文中有很多错误的概念,请大神们发现错误及时指正。

经过十几个小时的分析研究,总结了一套vue项目的安装流程。最首先,是安装node。中文网站:http://nodejs.cn/download/ 下载10.15.3 不要下载最新版。否则会入坑。耽搁好长时间。

  • npm install -g vue-cli //用vue的脚手架安装。。相当于下载一个框架,例如CI。
  • vue init webpack 项目名称 //webpack,就当他是一个源码加密工具吧【其实是一个打包发布工具】正儿八经学习的时候,这个是放在后面的,本文是快速上手,所以就直接开干了。

安装时候,有些哥们是一路回车。我是有所取舍,前3个是项目名称、描述、作者。其余的我上图

  • 在安装的过程中,会出现一堆提示。只要不是error错误,而是组件依赖提示,则执行npm audit fix ,然后再执行 npm audit fix –force即可。
  • 执行 cd frog_vue[我的项目名] ,npm run dev[进入设计模式],则会出现类似 http://localhost:8080的提示。浏览器打开,即可看到vue的界面。

PS:出现如下提示:

解决办法是:

找到modules包里面的:node_modules\vue-loader\lib\template-compiler\index.js

将{ parser: “babylon” } 换成 { parser: “babel” } 即可

以下是在 项目目录下的模块安装【ctrl+c退出dev模式】

记得出现以下提示后,执行npm audit fix 和 npm audit fix –force

  • 安装刚开始而已。接着安装webpack_cli: npm install webpack webpack-cli –save-dev   [save,就是把这个模块保存到package.json记录中,方便项目移植,类似composer   -dev的意思就是在开发模式下使用,在生产环境中不会下载这个模块]
  • npm install vue-awesome-swiper –save 【安装幻灯片模块】
  • npm install vue-resource –save 【安装类似ajax的模块】
  • npm install js-cookie –save 【安装cookie模块】
  • npm install vuex –save【安装vue状态管理模块,就理解为管理session或者global变量的工具吧】
  • npm install –save-dev babel-loader @babel/core @babel/plugin-syntax-dynamic-import 【安装babel模块,就是把vue的语法转换成js,能让绝大部分浏览器执行的工具,这里是安装了多个模块,如果报错,就分开安装】
  • npm install axios –save【安装axios,也类似ajax】

以下是我项目中需要的。你可以不用安装

  • npm install crypto-js –save【一个加密模块】
  • npm install clipboard –save【复制到粘贴板】
  • npm install –save vue-clipboard2【复制到粘贴板】
  • npm install qrcodejs2 qrcode –save【二维码生成模块】
  • npm install –save-dev node-sass sass-resources-loader sass-loader 【sass scss编程css模块,分别安装】
  • npm install –save qiniu-js 【七牛模块】
  • npm install –save vue-cropper vuex-persistedstate【图片剪切上传】
  • npm install –save-dev xxtea【加解密模块】

全部安装完毕后,运行npm run dev,还是那个界面。。不要急,ctrl+c退出。vue -V 查看vue版本,我们用个vue的UI框架吧。毕竟我们是程序员,而不是美工。我用的是嘀嘀开发的vue UI。相应的参考文档是:https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

  • npm install cube-ui –save 
  • npm install webpack-transform-modules-plugin –save-dev【UI配置】
  • npm install stylus –save-dev【UI配置】
  • npm install stylus-loader –save-dev【UI配置】
  • npm install webpack-post-compile-plugin –save-dev【UI配置】
  • npm install –save-dev babel-plugin-transform-modules 【babel插件】
  • 以上安装部分完毕后,修改配置,在bulid目录下【因为很菜,还要快速搭建项目采用普通编译方式、具体可以参看源文档】
  •  
  • 完整配置的源码:frog_vue 实现效果:

 

安装部分到此结束

vue路由的学习:https://router.vuejs.org/zh/
https://blog.csdn.net/weixin_43254265/article/details/84260888
vue校验插件 https://baianat.github.io/vee-validate/
vuex 状态管理 https://vuex.vuejs.org/zh/guide/
saas CSS学习 https://blog.csdn.net/qq_41797053/article/details/82463457
https://www.cnblogs.com/wulinzi/p/8072815.html

噢!评论已关闭。