vue,一路走来(1)

2016年12月--2017年5月,接触前端框架vue,一路走来,今天才觉得有必要把遇到的问题记录下来。

那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目,其实还有一个原因是网上大部分学习的资料视频都是以饿了么框架来演示的。同时很感谢认识的以及不认识的小伙伴为我解决项目中遇到的问题。

用webpack构建vue项目

1.需要安装node环境。(直接网上找下载就好)

2.在你想要新建项目的路径下新建文件夹,用于存放项目文件,然后shift+右键,选择‘在此处打开命令窗口’,按以下命令操作

本人建议将 npm 的注册表源设置为国内的镜像(淘宝镜像 cnpm),可以大幅提升安装速度。

在建立项目的过程中,有进行选择的选项,可以选择Y或者N,这根据自己需要所选,不影响什么,但红色框内的对ES6和ESLint不是很熟的话我个人不建议你应用它,因为要求比较严格,所以一不小心就报错,导致整个项目运行不起来,对于初学很痛苦。

安装vue的时候遇到的问题(其实是朋友遇到的问题,最后解决了,分享一下)

执行$ npm install --global vue-cli这一步的时候出现以下问题:

解决:

1. 查看系统环境变量:鼠标右键单击我的电脑→属性→高级系统设置→环境变量→在系统变量下新建NODE_PATH并输入“E:\nodejs\node_global\node_modules”( “E:\nodejs\node_global\node_modules”  这个是你安装node的路径,我的是安装在e盘)

2. 打开这个目录 C:\Users\Administrator\AppData\Roaming\npm  查看文件中是否有

这几个文件,如果没有,可以尝试去你原来安装node的盘里找

我的node是安装在E盘

然后将

这些文件复制到C:\Users\Administrator\AppData\Roaming\npm 中,再将

这个文件夹中的vue-cli复制到C:\Users\Administrator\AppData\Roaming\npm\node_modules

然后启动cmd,输入vue –V,就可以看到一下结果了

时间: 2024-10-05 11:26:20

vue,一路走来(1)的相关文章

vue,一路走来(3)

所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不过,vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios(可自行去了解).但我在项目中用的是vue-resource,下面就来讲一下过程中遇到的问题吧! vue-resource(数据交互) 1.先安装 cnpm install vue-resource --s

vue,一路走来(7)

今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log(this.getStatus(this.$route.path)) this.userpath() //我要执行的函数 }, methods: { getStatus (urlStr) { var urlStrArr = urlStr.split('/') return urlStrArr[url

vue,一路走来(12)--父与子之间传参

今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionnow)"></component-a> import componentA from './components/componentA' export default{ name:'Index', data(){ return{ positionnow:'' } } } compon

vue,一路走来(6)

微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面打开H5网页中执行JS调起支付.接口输入输出数据格式为JSON.注意:WeixinJSBridge内置对象在其他浏览器中无效. 注意:在微信支付后台正确配置授权目录后,如果还是出现当前页面的URL未注册,查看http://www.kejik.com/article/152868.html 同时下载以下文件放

vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './assets/css.css' src/assets/scss.scss $border-color:#c58f5d; .box{ width:100px; height: 100px; border:1px solid #f40; } 第一步:安装依赖 cnpm install node-sass --sa

vue,一路走来(4)

补充 今天突然发现自己前面(2)说可以调用外部js,却忘记详细介绍如何调用函数了. 1.首先在main.js里引用文件 2.然后算是和jquery框架一样需要所谓的入口函数吧 不过令我烦恼的是,在应用的文件中需要把他包含在另一个函数里,才可以调用到.看了别人的例子好像也是这么用的.暂时就先这样了. vuex 想着底部导航块有些页面并不需要呈现出来,后面看到一个案例,用了vuex的分发dispatch 安装:npm install vuex --save http://blog.csdn.net/

vue,一路走来(8)

Mint-ui的复选框列表Checklist和Radio 由于我在main.js里已经引用了全部的组件了,这里就不再按需引入了. 一直想着如何将自己的数据添加到 label 和 value里面,后面发现可以用push的方式,如下图: Mint-ui的日期时间选择器Datetime picker 我设置了当前时间为默认时间,可是不知道怎么将过期的时间设置为不可选. 这2个事件openPickerstart,openPickerend起到绑定数据值的变化,但取出来的时间戳格式不对,所以我进行了转换.

vue,一路走来(14)--短信验证码框的实现(类似支付密码框)

由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实input标签),提高层级定位在上方,最大长度为6,然后将上方真实input标签的值传给每一个单独的假input标签. <div class="phonenum-show"> <div class="getback-title">收回剩余礼金 <

2015互联网校招总结—一路走来 (移动端开发面经,另有面经汇总)

转载请注明出处:http://blog.csdn.net/ns_code/article/details/40408397 写在前面 结束了在百度的实习,是时候写下校招的总结了,再不写估计很多东西都忘了.在开源社区混迹久了,从别人的学习.求职.工作经历中越发感受到很多的正能量, 也本着攒RP的原则,向学弟学妹们,尤其非名校的学弟学妹们传递点正能量,因为博主也是非名校出身,而且在整个求职的过程中能够很明显地感受到名校学生那 种得天独厚的优势,同样的实力,名校学生进入BAT等一线互联网企业确实要容易