原文链接:http://blog.csdn.net/solo95/article/details/72084907

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

Window环境下搭建Vue.js开发环境的更多相关文章

  1. 在window下搭建Vue.Js开发环境

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org ...

  2. 在window下搭建Vue.Js开发环境(转)

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...

  3. window下搭建Vue.Js开发环境

    一.安装node.js.https://nodejs.org/en/download/ 最新包会自动安装npm 二.安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度 ...

  4. vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)

    2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2 ...

  5. 搭建Vue.js开发环境(window10)

    我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...

  6. Window环境下搭建android NDK开发环境

    1.下载ndk和cygwin NDK 下载地址:http://developer.android.com/tools/sdk/ndk/index.html Cygwin 下载地址:http://cyg ...

  7. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  8. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  9. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

随机推荐

  1. 使用Themeleaf时, HTML内嵌的JS代码需要注意< 和 >的问题

    如果你使用了Themeleaf, 你的HTML文件又使用了内嵌的JS代码,那么一定要注意 你的JS代码必须用这样用: <script> /*<![CDATA[*/ var a = 6 ...

  2. 【NOI2007】社交网络

    [NOI2007]社交网络 Description 在社交网络(social network)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题.在一个社交圈子里有n个人,人与人之 ...

  3. opengl矩阵向量

    如何创建一个物体.着色.加入纹理,给它们一些细节的表现,但因为它们都还是静态的物体,仍是不够有趣.我们可以尝试着在每一帧改变物体的顶点并且重配置缓冲区从而使它们移动,但这太繁琐了,而且会消耗很多的处理 ...

  4. 用Unity的UGUI实现简单摇杆

    1.在Canvas下新建一个空对象作为我们的摇杆,命名为Joystick. 摇杆由背景和杆两部分组成,所以在Joystick下新建一个Image作为摇杆的背景,命名为BG. 在BG下新建一个Image ...

  5. 安装配置heapster(包含influxdb,grafana)

    前提:已搭建好kubernetes集群.安装完dashboard 默认安装的dashboard无法展示集群的度量指标信息,此时就需要安装heapster插件 Heapster 插件使用包含三部分内容: ...

  6. Codeblocks自动代码格式化快捷键(自带)

    代码区域右击 点format use AStyle 估计也就是考试竞赛逼着用这个

  7. nodejs加载模块心得,mongoose的继承,schematype的mixd介绍

    1. require("xxx")可以是原生模块, 也可以是根目录“/node_modules”下的某个模块 2. 多个模块的package.json使用同一个相同模块的时候,将改 ...

  8. 升级salt导致进程kill问题记录

    重启salt-minion导致由salt启动的进程kill问题排查 作者:耀耀 blog:https://www.liuyao.me 环境 服务器系统为centos6及centos7 服务器服务进程都 ...

  9. Python中collections模块的使用

    本文将详细讲解collections模块中的所有类,和每个类中的方法,从源码和性能的角度剖析. 一个模块主要用来干嘛,有哪些类可以使用,看__init__.py就知道 '''This module i ...

  10. beat冲刺(7/7)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(7/7) 后敬甲(组长) 过去两天完成了哪些任务 ppt制作 视频拍摄 接下来的计划 准备答辩 还剩下哪些 ...