Window环境下搭建Vue.js开发环境
笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angular、Vue三足鼎立的局面,在这三种框架中,Vue最为简单,使用场景最为广泛,因此笔者从Vue开始学习,但是发现网上能搜到的Vue安装教程均不全面,所以写出此篇供大家学习。
大致步骤
- 安装Node.js
- 安装Vue.js
- 安装Webpack
Step1: 安装Node.js
Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。后续安装都依赖于npm命令(笔者注)。
官方下载地址: https://nodejs.org/en/download/
- 下载完成后直接安装,选择默认路径,Windows还是比较方便的,这时候请注意,其他教程都有设置Path的步骤,其实你可以不设置,因为Windows下安装的时候默认有add to Path功能。
- Win + R打开cmd,然后输入
node --version
看到版本信息说明安装成功,接下来输入npm install node安装node的二进制文件,这可能耗费一点时间。
如果在上述步骤遇到问题可以参考这里: http://www.runoob.com/nodejs/nodejs-install-setup.html 其中二进制文件的方法与上述步骤有所差异,菜鸟教程是下载exe直接安装。
Step 2: 安装Vue.js
首先使用淘宝的镜像升级npm,使其可以使用cnpm命令(单纯的npm可能由于网络长城因而速度受限)。
- 升级npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装Vue
cnpm install vue
- 安装Vue官方提供的命令行工具
cnpm install -g vue-cli
Step3: 安装webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript、JSX等),并将其打包为合适的格式以供浏览器使用。
- 安装WebPack
cnpm install webpack -g
- 在合适位置新建一个文件夹,命名为Vue-Demo,点进文件夹,右键git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)
- 使用
vue init webpack vue-test
创建一个示例目录,回车下一步,遇到选择都选n。 -
cd vue-test
进入这个目录,遇到命令行界面卡死,可以鼠标点进这个目录,然后git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录) -
cnpm install
安装依赖 cnpm run dev
- 浏览器输入localhost:8080看到Vue界面证明所有步骤均成功。
遇到问题参考这里: http://www.cnblogs.com/jiajia123/p/6132265.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 给你点信心——LeetCode题目7:整数反转
- Python -二叉树 创建与遍历算法(很详细,转自国外教程)
- APP流量来源追踪方式——Android篇
- 从浏览器输入网址回车到看到页面过程到底经历了什么?
- Flutter Bloc 官方文档(BlocBuilder翻译)
- OpenGL ES 3.0 | 统一变量和属性的概念与(在程序中的)获取流程、统一变量缓冲区对象详解、std140块规范、用 命名统一变量块 建立 统一变量缓冲区对象 的流程 和 相关API 和...
- 深入浅出SVM(PART III)
- 高频原题——LeetCode题目8:字符串转换整数 (atoi)
- 不转字符串判断——LeetCode题目9:回文数
- 关于双指针的简单理解
- 面试题噩梦之一——LeetCode题目10:正则表达式匹配
- 什么时候触发GC
- 找找数学上的规律——LeetCode题目11:盛最多水的容器
- Java学习笔记, 不断更新
- 这题真是送分——LeetCode题目12:整数转罗马数字