VUE2X实战开发随笔

这段时间以来学习vue的一点小小的的总结和体会,--给未来的自己。

vue 环境的安装:

Mac 环境(打开终端键入一下命令)

首先安装HomeBrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装nodejs

brew install nodejs

这时你可能需要获取权限

sudo chmod -R 777 /usr/local/lib/node_modules/

然后装一下淘宝镜像(一些依赖npm可能会很慢,用淘宝镜像会提升一点速度)

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架(能快速的帮你搭建vue模版)

npm install vue-cli -g

在硬盘上建一个文件夹或找一个文件夹,在终端进入该文件夹

cd 文件夹路径

然后输入

vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

接下来根据提示操作:

会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字

然后进入工程的文件夹

cd 放入该工程的文件夹路径

安装依赖 (不要用cnpm 淘宝镜像,可能会缺失一部分依赖)

npm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

然后启动项目(项目启动不成功,可能是webpack版本低。也可能是缺少一部分依赖)

npm run dev

时间: 2024-10-07 04:58:32

VUE2X实战开发随笔的相关文章

VUE2X实战开发随笔(二)

vue的单页面应用开发会把页面中所有的文件都会打包在build.js文件中,这样可能这个文件变得很大,对性能,体验都不是很好的选择: 单页面应用改为多页面应用的方法: 开始改造 最主要的一步,将webpack进行改造以满足对多页面需求的支持,其实多页面,即是webpack有多个入口.在此步中,我们主要的操作的对象是 build文件夹下的js文件. 首先,我们对 utils.js进行改造 添加一个方法:getEntries,方法中需要使用到node的globa模块,所以需要引入 // glob模块

Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis)视频教程

Extjs5.0从入门到实战开发信息管理系统(Extjs基础.Extjs5新特性.Spring.Spring mvc.Mybatis)视频教程下载   联系QQ:1026270010 Extjs作为一款优秀的JS前端开发框架以其良好的架构.丰富的UI组件库.完善的文档和社区支持等诸多优点拥有广泛的市场应用空间,开发人员无需过多的关注HTML.CSS甚至各种常用JS算法,只需把精力放在业务逻辑上,利用各种组件的相互组合调用便可轻松而高效的开发出系统的前端页面. Extjs5在之前版本的基础上又推出

Android软硬整合设计与框架揭秘: HAL&amp;Framework &amp;Native Service &amp;App&amp;HTML5架构设计与实战开发

掌握Android从底层开发到框架整合技术到上层App开发及HTML5的全部技术: 一次彻底的Android架构.思想和实战技术的洗礼: 彻底掌握Andorid HAL.Android Runtime.Android Framework.Android Native Service.Android Binder.Android App.Android Testing.HTML5技术的源泉和精髓等核心技术,不仅仅是技术和代码本身,更重要的是背后的设计思想和商业哲学. 一.课程特色 l  贯通And

Lucene4.6+Solr4.6实战开发垂直搜索引擎 Lucene4.6实战视频教程

<基于Lucene4.6+Solr4.6+Heritrix1.14+S2SH实战开发从无到有垂直搜索引擎> 课程讲师:小叶子 课程分类:Java 适合人群:初级 课时数量:69课时 用到技术:Hibernate.Struts.Spring.jQuery.Lucene.Solr.Heritrix 涉及项目:百度文库搜索引擎 垂直搜索引擎是针对某一个行业的专业搜索引擎,是搜索引擎的细分和延伸,是对网页库中的某类专门的信息进行一次整合,定向分字段抽取出需要的数据进行处理后再以某种形式返回给用户.垂直

基于微博数据应用的HBase实战开发_HBase视频教程

基于微博数据应用的HBase实战开发 课程观看地址:http://www.xuetuwuyou.com/course/150 课程出自学途无忧网:http://www.xuetuwuyou.com 一.课程用到的软件 1.centos6.7 2.apache-tomcat-7.0.47 3.solr-5.5 4.zookeeper 3.4.6 5.eclipse-jee-neon-R-win32-x86_64  6.jdk1.7_49 7.HBase1.2.2 8.Ganglia3.7.2 9.

实战开发农商O2O在线交易系统—架构及数据库设计

本课程主要介绍实战开发O2O在线交易系统-架构及数据库设计为主题,主要从系统开发背景,系统分析,可行性分析,功能结构图,数据库结构图进行分别讲解,主要对数据库进行ER图的表实体设计同时对于代码块中的公共类.拦截器,以及接口和接口实现类进行开发.在本课程中最主要还是对系统的架构设计,以及运行流程进行图形化讲解. 课程目录:第1课时开发背景及系统分析第2课时系统流程结构图设计(1)第3课时系统功能结构图第4课时数据库表的设计第5课时系统流程结构E-R图设计第6课时Mysql数据库开发第7课时产品主类

升级版:深入浅出Hadoop实战开发(云存储、MapReduce、HBase实战微博、Hive应用、Storm应用)

      Hadoop是一个分布式系统基础架构,由Apache基金会开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有着高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上.而且它提供高传输率(high throughput)来访问应用程序的数据,适合那些有着超大数据集(large data set)的应用程序

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <