准备了以下的工具进行安装本地开发环境:

  • 代码编辑器×1【本人使用VSCode 1.11】
  • Nodejs安装包×1【必须】(官网下6.10.x的就行了)
  • 正常使用的Windows电脑一台(推荐Win7及以上电脑进行开发,最推荐Win10)

本文使用Powershell,cmd也可以的。

一、对于第一次使用Vue的Windows用户【搭建本地开发环境】

第一步,一路下一步安装Nodejs;

第二步,打开cmd或者WindowsPowershell或者Git命令行,用npm安装cnpm

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

第三步,用cnpm或者npm按照vue官网的资料安装vue

cnpm install vue

第四步,用cnpm或者npm安装打包工具(就是Web开发工程的打包工具)——webpack

cnpm install webpack -g

第五步,在准备创建工程的同级目录下安装vue-cli(推荐cnpm)

cnpm install --global vue-cli

以上为环境搭建。

二、创建Vue工程

第一步,用vue创建一个工程,在Windows会是一个文件夹的形式

vue init webpack 工程名

这里看下图,Powershell实际操作截图,有的细节以后补充。

第二步,cnpm或npm(在工程目录下)执行install,安装其他依赖

cnpm install

如下图最后两行。

漫长的刷屏和等待。

最终会部署65个包。

第三步,启动vue工程(cnpm或者npm run dev命令)

这里显示用了19.3秒,就会自动弹出浏览器页面(停止就关掉Powershell或者ControlC就行了,下次加载可以用IIS加载工程目录):

这个时候就可以用VSCode编辑整个工程了:

关于VSCode,可能需要安装一些支持Vue的插件(点我),希望微软爸爸以后能原生支持Vue吧。

Vuejs环境安装与工程建立【小白Windows向】的更多相关文章

  1. sharepoint环境安装

    SharePoint 2013 测试环境安装配置指南 软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企 ...

  2. windows环境安装MySQL

    转:https://www.cnblogs.com/ayyl/p/5978418.html windows环境安装MySQL mySQL下载链接:MySQL Installer 5.7 :http:/ ...

  3. Redis及虚拟机windows两种环境安装配置

    ---恢复内容开始--- Redis  /rae  dis/是一个开源的Key-Value数据库.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链 ...

  4. eclipse 下载、安装、创建java文件工程、运行---Windows 10

    一.Eclipse Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,Eclipse 附带了一个标准的插 ...

  5. .NET Core Windows环境安装与体验

    1.安装.NET Core SDK 在windows下开发.NET Core最好使用Visual Studio工具.下载地址与安装: VS2015最新版本:Visual Studio 2015 Upd ...

  6. Java JDK 8 安装和环境变量的配置(Linux and Windows)

    Java JDK 8 的安装以及环境变量的配置(Linux and Windows) JDK(Java Development Kit)包含了Java语言的编译器,能够在这里下载: http://ww ...

  7. Redis:在windows环境安装Redis

    Redis:在windows环境安装Redis 第一步: 下载windows版本的Redis:https://github.com/MSOpenTech/Redis. 第二步: 在命令行执行:D:\r ...

  8. Windows 10环境安装VIM代码补全插件YouCompleteMe

    Windows 10环境安装VIM代码补全插件YouCompleteMe 折腾一周也没搞定Windows下安装VIM代码补全插件YouCompleteMe,今天在家折腾一天总算搞定了.关键问题是在于P ...

  9. PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法

    PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法 1.电脑需要先安装redis服务端环境,并在安装目录下打开客户端redis ...

随机推荐

  1. RecyclerView 加点击事件

    在apapter里去实现. View.OnClickListener onClickListener = new View.OnClickListener() { @Override public v ...

  2. 《java.util.concurrent 包源码阅读》28 Phaser 第二部分

    这一部分来分析Phaser关于线程等待的实现.所谓线程等待Phaser的当前phase结束并转到下一个phase的过程.Phaser提供了三个方法: // 不可中断,没有超时的版本 public in ...

  3. Nvidia TX2 Robot 环境配置记录

    p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 } p. ...

  4. MVC Code First(数据模型实例讲解)

    首先配置好web.config <connectionStrings> <add name="BookDbContext" connectionString=&q ...

  5. PHP yield 分析,以及协程的实现,超详细版(上)

    参考资料 http://www.laruence.com/2015/05/28/3038.html http://php.net/manual/zh/class.generator.php http: ...

  6. MyEclipse Java基础使用笔记

    一.Java开发平台 JavaSE  标准版 Java应用程序 application  五子棋.计算器.qq JavaEE  企业版  Java企业级应用 JavaME 微型版  小型设备    A ...

  7. 巧-微信公众号-操作返回键问题-angularjs开发 SPA

    在解决这个问题之前,一直处在很苦逼的状态,因为 现在绝大多数 前端模块都是 SPA 模式:所以由此而来出了许多的问题,当然我现在提的这个只是其中一个: 说一下解决方案: 1.技术栈 angularjs ...

  8. JAVA提高十九:WeakHashMap&EnumMap&LinkedHashMap&LinkedHashSet深入分析

    因为最近工作太忙了,连续的晚上支撑和上班,因此没有精力来写下这篇博客,今天上午正好有一点空,因此来复习一下不太常用的集合体系大家族中的几个类:WeakHashMap&EnumMap&L ...

  9. 服务器获取浏览器发送请求中的cookies,选取自己需要的cookie

    String cookieName = “userID”; // 设置自己需要的cookie名 Cookie cookies[] = request.getCookies(); // 获取请求中的所有 ...

  10. PHP能引起安全的函数

    php中需要禁用以下函数来提高安全性 打开php.ini  找到 disable_functions .然后禁用以下函数 disable_functions = pcntl_alarm, pcntl_ ...