Vue.js环境搭建-Windows版

步骤一:安装node.js

在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,

网址1:http://nodejs.cn/download/

网址2:https://nodejs.org/dist/

为了成员之间统一版本,我们使用的node-v8.9.1版本:(安装到自己的自定义目录)

链接:https://pan.baidu.com/s/18N4k1Dxdl2TGbWs9Ayn2yw
提取码:n431

步骤二:安装镜像

由于 npm install安装速度慢,所以本文使用阿里淘宝镜像及其命令 cnpm进行安装,cmd黑窗口输入命令:

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

步骤三:安装Vue

输入:cnpm install vue ,回车等待终端给出响应。

步骤四:安装全局vue-cli脚手架

输入: cnpm install --global vue-cli,安装全局vue-cli脚手架,用于快速搭建大型单页应用。

步骤五:检查Vue是否安装成功

输入: vue -V检查是否安装成功,如果返回版本号则说明安装成功。

步骤六:查看官网提供的模板(这个步骤可以省略)

六个模板中我们主要使用webpack模板,原因如下: WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

步骤七:创建一个基于 webpack 模板的新项目(可略)

终端切换到你的目标目录下创建一个项目,这里以在vue的安装目录下创建一个叫做my-vue-project的项目为例:输入

vue init webpack my-vue-project

终端会给你返回如下内容:

然后一路回车。

步骤八:启动项目,访问项目(可略)

  8.1进入项目

   cd my-vue-project

  8.2启动项目

     cnpm run dev

  8.3测试访问

    成功执行以上命令后访问 http://localhost:8080/

可能遇到的问题:

  1. 权限问题

    安装vue后,执行vue –V 命令报错如下:

vue : 无法加载文件 C:\Users\zs\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

解决:不通过Windows PowerShell执行命令,通过cmd执行

   2. 启动spt-marking-vue项目报错

 404s will fallback to /index.html

 fs.js:

  throw new ERR_INVALID_CALLBACK();

  ^

 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

    at maybeCallback (fs.js::)

    at Object.write (fs.js::)

    at /MyWorkProject/hcg/build/webpack.dev.config.js::

    at FSReqWrap.oncomplete (fs.js::)

 error code ELIFECYCLE

 error errno 

 error iview-project@2.0. dev: `webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js`

 error Exit status 

 error Failed at the iview-project@2.0. dev script.

 error This is probably not a problem with npm. There is likely additional logging output above.

 verbose exit [ , true ]

问题原因:node 版本问题,node v10 以上 fs.write 的callback 是必须的,降低Node版本可解决。

不安装node也可以,可以将webpack.dev.config.js 和 webpack.prod.config.js 中的代码修改即可:给fs.write添加必要的callback函数,具体操作是修改以上两个文件中的以下代码:

fs.write(fd, buf, , buf.length, , function(err, written, buffer) {});

修改为:

fs.write(fd, buf, , 'utf-8', function(err, written, buffer) {});

按照上面指定的node版本不会出现该问题。

Vue.js安装及环境搭建的更多相关文章

  1. Vue.js 安装及其环境搭建

    For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...

  2. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

  3. 萌新--关于vue.js入门及环境搭建

    十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...

  4. Windows 系统下Vue的安装及环境搭建

    Hope to help those in need and those who use Vue for the first time. 1.获得并安装node.js.nodejs官网:https:/ ...

  5. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  6. vue.js安装过程(npm安装)

    一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

  7. node.js之开发环境搭建

    一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...

  8. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  9. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

随机推荐

  1. OpenGL入门1.5:矩阵与变换

    每一个小步骤的源码都放在了Github 的内容为插入注释,可以先跳过 前言 在阅读本篇博客之前,你必须对向量和矩阵有基本的认识,并且能熟练进行向量和矩阵的运算 我们已经知道了如何创建一个物体.着色.加 ...

  2. qt构建错误: dependent "*.h" does not exist.

    项目中需要维护一套qt工程,今天发现一个头文件名称中单词拼写错误,就改正了,结果重新构建提示: dependent "*.h" does not exist. 原因:修改了文件后, ...

  3. LFI (local file inclusion vulnerability)本地文件包含

    代码实例: <?php $file = $_GET['file']; if(isset($file)) { include("pages/$file"); } else { ...

  4. 剑指offer 15:链表的倒数第k个节点

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 解题思路 使用快慢指针法,让快指针先走k步,然后再让慢指针开始走,当快指针到达链表尾部时,慢指针刚好到达倒数第k个节点. C++代码实现: /* ...

  5. 版本管理·玩转git(分支管理)

    在开发中,遇到这样的情况怎么办? 网站已有支付宝在线支付功能,要添加"微信支付",修改了两个文件,wechat.php.pay.php. 刚做到一半,突然有个紧急bug:支付宝支付 ...

  6. 一文解读Spring全家桶 (转)

    Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...

  7. MySQL 部署分布式架构 MyCAT (五)

    分片(水平拆分) 4.全局表 业务使用场景: 如果你的业务中有些数据类似于数据字典,比如配置文件的配置, 常用业务的配置或者数据量不大很少变动的表,这些表往往不是特别大, 而且大部分的业务场景都会用到 ...

  8. 修改postgresql 密码

    sudo -u postgres psql -c "alter user postgres password '123456';"

  9. 往对象数组里面添加相同的key 不同的value 和删除相同的key值

    应用场景:后盾字段没有发给你  自己补充数据 <div v-for="item in list" :key="item.id"> <p> ...

  10. 初学JavaScript正则表达式(五)

    范围类 [ ] 例: 'a1b1c1s1v1d1f1'.replace(/[a-z]/g,'q') //q1q1q1q1q1q1q1 将a-z范围内的字符替换为q 'a1b1c1s1v1d1f1AKS ...