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

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

本文面向的对象是熟悉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