做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是。。。

1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js

2.接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架

3.命令为:cnpm install -g vue-cli,回车,等待安装

安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。

4.紧接着,就该创建项目了,自己找一个合适的地方,新建一个项目文件夹,根据自己的需要命名,我的命名为 my-vue,然后,打开此文件夹,右键git bash here,定位到此文件夹,输入:vue init webpack my-vue(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作:

此时,观察my-vue的文件夹下又多了一个vue-test文件夹,这个就是vue项目的文件夹,如图所示:

5.之后通过命令:cd vue-test 进入此文件夹,在利用命令:cnpm install,回车,等待一小会儿,回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)。

6.在命令行里继续输入 cnpm run dev来测试环境是否搭建成功,如果出现如下图说明成功了:

在浏览器里输入localhost:8080就可以查看页面如下:

但是,,,,一出现但是,就有可能是坏情况了,我到最后一步的时候,运行 cnpm run dev的时候,就出现了错误,错误信息类似下图的信息:

,它提示npm应该更新到3.0.0版本,所以我从网上各种搜怎么更新npm的版本,关于版本更新的问题各有说法而且都不怎么起作用,依然是运行不成功,最终找到了一种办法,按照之前安装node 的相同的路径,重新下载一个最新版本的node安装,这个办法简单暴力。究其原因,是因为我将node的配置文件的registry配成了国内某镜像,然而国内某镜像未做到最新版本同步,仍保持在了4.4.7,而其对应的很多npm 安装包也并非最新,所以导致安装失败, 无法找寻到某些包的最新版本。所以重新安装是最好的解决办法了。重新安装完后,再运行cnpm run dev的时候就成功了。。至此,我的vue+webpack环境搭建终于大功告成了。

在windows下用脚手架搭建vue环境的更多相关文章

  1. Windows下vue-cli脚手架搭建入门<一>

    简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行,输入命令 node-v  .np ...

  2. Windows下Nginx+Mysql+Php(wnmp)环境搭建

    前言 最近想在windows下使用nginx搭建web环境,本来想用套件(WNMP)一键安装,但后来放弃了,觉得还是自己动手,丰衣足食的好,而且套件的局限性太大.所以后来就各种搜索,看到前辈写关于wn ...

  3. Qt4.8在Windows下的三种编程环境搭建

    Qt4.8在Windows下的三种编程环境搭建 Qt的版本是按照不同的图形系统来划分的,目前分为四个版本:Win32版,适用于Windows平台:X11版,适合于使用了X系统的各种Linux和Unix ...

  4. 【Hadoop】:Windows下使用IDEA搭建Hadoop开发环境

    笔者鼓弄了两个星期,终于把所有有关hadoop的环境配置好了,一是虚拟机上的完全分布式集群,但是为了平时写代码的方便,则在windows上也配置了hadoop的伪分布式集群,同时在IDEA上就可以编写 ...

  5. 利用VUE-CLI脚手架搭建VUE项目

    前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...

  6. 【转】linux和windows下安装python集成开发环境及其python包

    本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...

  7. linux下的服务器搭建集成环境

    linux下的服务器搭建集成环境 ——写给初学者的我们 1.准备工具 1.1 SecureCRT SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录 ...

  8. Windows下的Objective-C集成开发环境(IDE)

    Windows下的Objective-C集成开发环境(IDE) 分类: Objective-C2012-04-20 21:54 26631人阅读 评论(42) 收藏 举报 windowside编译器c ...

  9. windows下如何快速搭建web.py开发框架

    在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...

随机推荐

  1. tbox协程使用之切换与等待

    tbox的协程实现,是stackfull模式的,需要指定独立堆栈和协程函数,目前暂时还不能像golang那样实现堆栈的动态增长,之后会对其进行支持. 目前提供下面一些功能特性: 1. 提供yield切 ...

  2. python pip报错pip._ vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.

    AttributeError: module 'pip' has no attribute 'main报错 找到安装目录下 helpers/packaging_tool.py文件,找到如下代码: de ...

  3. jQuery基础--事件处理

    2. jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极 ...

  4. Vue的入门之安装

    vue.js是前端框架中比较热门的,因为工作关系,也加入了浩浩荡荡的学习大潮中,用笔记记录下点滴,便于后面学习查阅! 1 node.js环境的安装包(npm包管理器) 2 vue-cli 脚手架构建工 ...

  5. MVC与设计模式的关系及MVC的实现原理和设计原理

    1 MVC介绍 众所周知MVC不是设计模式,是一个比设计模式更大一点的模式,称作设计模式不合理,应该说MVC它是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种:Observer (观 ...

  6. linux误用rm删除文件后恢复

    linux 系统:ubuntu16.04 误把/usr/local local文件删除了,要疯 步骤: 1.对于文件系统为ext3文件系统 sudo apt-get install ext3grep ...

  7. 【知识强化】第三章 存储系统 3.5 双口RAM和多模块存储器

    下面我们进入双端口RAM和多模块存储器的学习.这是提高我们的存储器的访存速度的一些措施. 我们之前已经讲过我们的主存和CPU是进行连接的,那么这就导致了一个问题就是说,随着我们现代科技的发展,计算机的 ...

  8. Elasticsearch单机安装_集群搭建_索引基本操作_Head插件安装与基本操作_ik分词器配置_logstash实现数据同步_教程

    一.Elasticsearch单机安装 1.将es安装包传到服务器上 这是安装包 这里我是用的是WinSCP上传工具,上传到/home/plugins文件下. 进入Xshell,验证一下是否上传成功. ...

  9. Go's Declaration Syntax

    Introduction Newcomers to Go wonder why the declaration syntax is different from the tradition estab ...

  10. Hibernate 一对一(基于唯一外键的关联)

    主表 hbm.xml中 使用<one-to-one> 从表hbm.xml中使用<many-to-one> 并指定unique=true people.hbm.xml: < ...