vue.js 开发环境配置 完整版


教大家快速安装vue.js的运行环境。

一. 安装node环境

第一步当然是先去node官网去下载安装包。https://nodejs.org/en/download/    然后选择自己的系统版本(我是win64)    图片如下:

按照windows一般应用程序,一路next就可以安装成功。

安装完成之后,大家一贯的风格就是想到去文件夹里面去找**.exe文件双击打开,大家请注意这里我们不要去双击打开如图下的node.exe这个我们暂时就不用管他了。

我们此时打开命令终端窗口输入cmd单击确定如图下:

现在我们就进行node环境测试,

我们再次进入nodejs官网https://nodejs.org/en/about/

复制红框中的代码并打开终端命令窗口直接输入node然后粘贴代码然后回车如图下:

会出现一下代码段 然后用浏览器访问  标红的地址

恭喜你说明你的node已经安装成功了,  测试也是没问题的。

我们node 安装成功了,通常我们也可以查看版本 来知道知否安装成功 命令:node -v     如下图:2

二. npm安装

     安装完node之后,就要安装npm,由于许多npm包都是在国外,安装起来特别慢,所以我们这里     利用淘宝的镜像服务器,来对我们依赖的module进行安装。安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org  之后回车等待命令。

三. webpack 安装

     我们安装webpack 我们这里当下用于构建初始一个新项目,命令为:npm install -g webpack。

四. vue-cli 脚手架安装

      接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架,命令为:npm install -g vue-cli。安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。


五. 创建新项目

      自己找一个合适的地方,新建一个项目文件夹,根据自己的需要命名,我的命名为 demo,然后,进入这个文件夹。也可以下载Git 打开此文件夹, 右键git bash here,进入到此文件夹。我这里依然是dos窗口如图:

输入:vue init webpack my-vue(项目文件夹名),回车,等待一小会儿,项目正在从git上下载,可按下图操作:

项目构建:

1.项目名称。      2. 项目描述。    3.作者 。          4.build 选择(键盘上下方向选择)第二项。      5.vue-router 因为我们项目组件之间需要router连接、通信等,所以我们这里建议启用。  6.ESlint 作用是简析es6语法书写规范等 ,我们这里也建议启用。  下面这这俩项的意思是要不要测试,我们这里不需要。最后我们根据最后三个命令来进入项目(cd my-vue)、安装项目依赖(npm install 这里也可以用cnpm)、运行项目(npm run dev)。

这样我们就新建完成了一个新的项目。

附言:

其实中间有很多步奏都可以省略掉,如果想三分钟安装新建一个新项目就可以省略掉node测试步奏,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 425,705评论 152 921
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,220评论 7 35
  • 既入猎头门,终为猎头人 你们看了这篇文章,不要笑我啊!做猎头早已经搞的我错乱了,没有白天、没有黑夜、没有男朋友、也...
    猎头天下MarkMa阅读 996评论 1 1
  • chomd :找不到命令:解决方法: 找到安装目录运行chmod: 提示错误无权限修改,需要用sudo权限:
    hello大象阅读 8,699评论 0 0
  • 绿水叶黄芦花白, 九弯两岸垂钓悦。 闲游漫漫羊肠路, 蹬车急急驰远多。 碧波鱼儿偶跃起, 似笑钓者技弱弱。 鸭儿两...
    山东聊城李超阅读 125评论 0 0