Vue.js安装及环境搭建
Vue.js环境搭建-Windows版
步骤一:安装node.js
在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,
网址1:http://nodejs.cn/download/
为了成员之间统一版本,我们使用的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/
可能遇到的问题:
- 权限问题
安装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安装及环境搭建的更多相关文章
- Vue.js 安装及其环境搭建
For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...
- 【转载】Vue.js 安装及其环境搭建
注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...
- 萌新--关于vue.js入门及环境搭建
十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...
- Windows 系统下Vue的安装及环境搭建
Hope to help those in need and those who use Vue for the first time. 1.获得并安装node.js.nodejs官网:https:/ ...
- 【vue】vue.js安装教程/vue项目搭建
前提:已安装nodejs——npm (备注教程 “物理安装” ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...
- vue.js安装过程(npm安装)
一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...
- node.js之开发环境搭建
一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...
- 01: vue.js安装
1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...
- 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记
近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...
随机推荐
- 10、Fiddler中设置断点修改Response
当然Fiddler中也能修改Response 第一种:打开Fiddler 点击Rules-> Automatic Breakpoint ->After Response (这种方法会中 ...
- python 安装impala包
一路安装就可以 .pip install six .pip install bit_array .pip install thriftpy .pip install thrift_sasl .pip ...
- xml解析-jaxp添加结点
jaxp添加结点 eg: //在第一个下面添加nv / 1.创建解析器工厂 * 2.根据解析器工厂创建解析器 * 3.解析xml返回document * * 4.得到第一个p1 * -得到所有p1使用 ...
- 2018年最新Java面试题及答案整理
基础篇 基本功 面向对象特征 封装,继承,多态和抽象 封装封装给对象提供了隐藏内部特性和行为的能力.对象提供一些能被其他对象访问的方法来改变它内部的数据.在 Java 当中,有 3 种修饰符: pub ...
- matplotlib画3D图修改X,Y,Z,colorbar的刻度值
修改X,Y,Z轴的刻度值 from matplotlib.ticker import MultipleLocator,FuncFormatter from mpl_toolkits.mplot3d i ...
- 01-day-什么是webpack
.sass后缀的文件名 比较老了 现在它的后缀名是.scss 其实他们是同一个东西 只是 后缀名发生了变化 以 .sass写的文件的内容是 他没有括号 没有分号 有点怪 它跟新为了.scss 就有了花 ...
- c# 第27节 结构、枚举
本节内容: 1:为什么要有结构 2:结构体的声明和使用 3:为什么要有枚举.常识大考验 4:枚举的声明 5:枚举的使用 6:枚举的各种转换 1:为什么要有结构 2:结构体的声明和使用 结构的声明位置: ...
- SecureCRT自动断开连接的解决方法
方法一: 在普通用户下,输入重启sshd服务的命令:service sshd restart 这时会提示:管理系统服务或单元需要身份验证.解决的方法:先要切换为root用户,接着重启sshd服务:se ...
- Ubuntu下的录GIF神器——Peek
最近一直在找Ubuntu下面录GIF好用方便的软件一直没找到,很多都是要获取录屏四角的坐标,现在终于找到了,就是我们的录GIF神器——Peek. 1 获取Peek的ppa源 sudo add-apt- ...
- django自定义错误处理
要实现自定义错误处理的功能,总共分4步: 1.创建html错误页 2.配置settings ,当DEBUG=True,则不会生效 3.编写视图 4.配置url views.py def page_ ...