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

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

    node -v //显示node版本 v6.10.3

    npm -v  //显示npm包管理器版本 3.10.10

  3. 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm
  4. Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org
  5.  安装vue-cli脚手架构建工具
  6. 至此,我们需要的环境及工具已经准备好了。

    接下来,我们使用vue-cli来构建项目。

  7. 首先,我们先选择进入到e我们的工作目录为 E:\个人\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。
  8. 在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。
  9. 安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录firstVue,如下图。

  10. 主要用的包都在package.json中,如下图
  11. cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)
  12. 安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源
  13. 安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
  14. 如果启动过程中出现下方问题,只需要将config目录下的index.js文件中dev端口由8080改为8088

转自:https://www.cnblogs.com/RexSheng/articles/6934413.html

按照说明自己安装的情况如下

原文地址:https://www.cnblogs.com/SharkBin/p/8282501.html

时间: 2024-10-05 14:25:02

在window下搭建Vue.Js开发环境(转)的相关文章

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

2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2.下载并安装node.js(一直next即可) 安装完成之后在终端输入:node -v和npm -v查看是否安装成功.npm是node.js的包管理工具. 3.这里我们可以更改node.js默认下载依赖的位置 在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_g

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

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

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

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm

vue.js开发环境安装教程

一.nodejs安装-npm安装1.nodejs安装①下载对应系统版本的Node.js:https://nodejs.org/en/download/② 运行程序开始安装,一路next最终install即可2.npm安装(新版Node.js已自带npm)③检测是否安装成功.快捷键win+R,输入cmd回车打开cmd窗口node -v 查看node.js的版本号npm -v 查看node.js自带的npm的版本号3.配置环境变量[说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及

搭建vue的开发环境

搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html(官网地址) 1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具   官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli (此命令只需要执行一次) 3.创建项目   必须cd到对应的一个项目里面 vue init webpack vue-demo01 (创建项目文件夹

Win7下搭建安卓android开发环境

本文出自 "孤狼" 博客,请务必保留此出处http://332374363.blog.51cto.com/5262696/1310882 另外,在搭建android开发环境时,还参考了http://www.apkbus.com/android-641-1-1.html 参考了:http://wenku.baidu.com/view/6108ac19b7360b4c2f3f6406.html 一.假设你现在什么都没有,那么你需要下载以下的东西: 1.JDK(JavaDevelopment

Eclipse 下搭建pyDev python开发环境及helloworld

一,安装基础环境 1,安装jdk7,并配置环境变量(pyDev要求jdk7及以上版本,否则安装好也不显示) 2,下载Eclipse并解压 3,安装python3.X 二,Eclipse下配置pyDev 1,安装插件:help -> Install new Software.. ->输入PyDev Update Site - http://pydev.org/updates 然后下一步.同意等等. 2,配置python编译器:Window -> perferences -> pyDe

C++开发安卓、windows下搭建Android NDK开发环境

1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个工具,我们可以把用C/C++代码编译成可以直接运行在Android平台上的本地代码,这些本地代码以动态链接库( *.so )的形式存在,也正因为这样,我们可以通过复用这些动态链接库从而复用本地代码. 那么,通过NDK这个开发工具包,那么我们是否可以将一个APK完全使用C/C++来编写呢? 答案是不可