Window环境下搭建Vue.js开发环境

时间:2022-04-26
本文章向大家介绍Window环境下搭建Vue.js开发环境,主要内容包括大致步骤、Step1: 安装Node.js、Step 2: 安装Vue.js、Step3: 安装webpack、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

笔者最近在进行前端的学习,在点完了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/

  1. 下载完成后直接安装,选择默认路径,Windows还是比较方便的,这时候请注意,其他教程都有设置Path的步骤,其实你可以不设置,因为Windows下安装的时候默认有add to Path功能。
  2. 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可能由于网络长城因而速度受限)。

  1. 升级npm npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 安装Vue cnpm install vue
  3. 安装Vue官方提供的命令行工具 cnpm install -g vue-cli

Step3: 安装webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript、JSX等),并将其打包为合适的格式以供浏览器使用。

  1. 安装WebPack cnpm install webpack -g
  2. 在合适位置新建一个文件夹,命名为Vue-Demo,点进文件夹,右键git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)
  3. 使用vue init webpack vue-test创建一个示例目录,回车下一步,遇到选择都选n。
  4. cd vue-test进入这个目录,遇到命令行界面卡死,可以鼠标点进这个目录,然后git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)
  5. cnpm install安装依赖
  6. cnpm run dev
  7. 浏览器输入localhost:8080看到Vue界面证明所有步骤均成功。

遇到问题参考这里: http://www.cnblogs.com/jiajia123/p/6132265.html