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

  • 代码编辑器×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. TFboy养成记 tensorboard

    首先介绍几个用法: with tf.name_scope(name = "inputs"): 这个是用于区分区域的.如,train,inputs等. xs = tf.placeho ...

  2. Java 执行CMD/DOS

    最近在写一个自己的邮箱服务器里用到 监视及起/停 windows 中的服务,调查发现还是得用dos来做这些事情 说一下遭遇战的过程 首先是java里如何执行DOS命令,查到下记函数 Runtime.g ...

  3. redis复制原理和应用

    1.前言 说到分布式高可用,必然少不了复制,一来是为了做个冗余备份防止数据丢失,二来还可以达到分流来提高性能的目的.基本架构: 下面用M表示Master(主服务器),S表示Slave(从服务器),话不 ...

  4. 基于iframe的移动端嵌套

    需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其中两个网址为内部项目,另外一个为外部(涉 ...

  5. CCF-201312-2-ISBN号码

    问题描述 试题编号: 201312-2 试题名称: ISBN号码 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包 ...

  6. yii2.0中数据缓存之增删改查

    public function actionSss(){ /* * 获取到缓存 * 这里是获取的是根目录下 的common/main.php中的缓存类组件 * */ $cache=\Yii::$app ...

  7. NodeJS爬虫入门

    1. 写在前面 往常都是利用 Python/.NET 语言实现爬虫,然现在作为一名前端开发人员,自然需要熟练 NodeJS.下面利用 NodeJS 语言实现一个糗事百科的爬虫.另外,本文使用的部分代码 ...

  8. C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式.

    C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式. 目录: 1.多重继承在内存中的表现形式 多重继承在汇编中的表现形式 2.菱形继承 普通的菱形继承 虚继承 汇编中的表现形 ...

  9. 将项目打包成jar,如何又将jar还原成项目

    一.将项目打包成jar 第一步: 选择项目,鼠标右键,选择export ,出现如下 接下来就是点击Next,Next,最后点击Finish 后 会生成jar 二.将jar还原成项目 第一步 用反编译工 ...

  10. Solr中Field常用属性

    FieldType 实例:<fieldType name="text_ik" class="solr.TextField"></fieldTy ...