文档章节

Vue.js安装及环境搭建

o
 osc_wws45aot
发布于 2019/08/21 17:23
字数 825
阅读 12
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

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项目报错

11 404s will fallback to /index.html

12 fs.js:127

13  throw new ERR_INVALID_CALLBACK();

14  ^

15 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

16    at maybeCallback (fs.js:127:9)

17    at Object.write (fs.js:531:14)

18    at /MyWorkProject/hcg/build/webpack.dev.config.js:12:8

19    at FSReqWrap.oncomplete (fs.js:139:20)

20 error code ELIFECYCLE

21 error errno 1

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

22 error Exit status 1

23 error Failed at the iview-project@2.0.0 dev script.

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

24 verbose exit [ 1, true ]

 

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

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

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

修改为:

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

 

 

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

 

 

 

 

 

 

 

 

 

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
5分钟 maven3 快速入门指南

前提条件 你首先需要了解如何在电脑上安装软件。如果你不知道如何做到这一点,请询问你办公室,学校里的人,或花钱找人来解释这个给你。 不建议给Maven的服务邮箱来发邮件寻求支持。 安装Mav...

fanl1982
2014/01/23
1.2W
6
Python开发者社区整站源码--Pythoner

pythoner.net 整站源代码 依赖模块 Django 1.4.2 PIL DjangoVerifyCode 0.2.2 开发环境配置 运行scripts目录下的setupenv.sh文件,将会自动安装配置所需环境 设置本地环境变量:export env=D...

~T.y~
2013/04/10
3.1K
0
Windows PHP 加速器--WinCache

微软新推出了配合FastCGI模式使用的WinCache扩展,这是一个可以显著增加PHP应用在Windows环境下使用速度的PHP加速器。所有的PHP应用都能够利用这个扩展所提供的加速功能而不需要修改任何代码...

王道中强流
2012/11/09
5.3K
0
解析apk安装包的工具--apkutil

apkUtil是一个用来解析apk安装包的工具,通过它可以获取一个安装包的图标、程序名、所需android平台,权限等信息,并将其转换为java对象。该工具依赖于aapt工具,目前仅支持在windows平台上运...

貌似掉线
2012/11/18
5K
0
Android下的Shell环境--ZShaolin

ZShaolin 在你的 Android 设备上安装一个小型而且强大的脚本和 Shell 环境。并提供编辑、写和上传图片、音频、视频的应用:FFMpeg, ImageMagick, Sox, Oggz, Lua, GNU awk, sed, grep, and ...

匿名
2012/11/21
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
28分钟前
13
0
原子属性和非原子属性有什么区别? - What's the difference between the atomic and nonatomic attributes?

问题: What do atomic and nonatomic mean in property declarations? 属性声明中atomic和nonatomic是什么意思? @property(nonatomic, retain) UITextField *userName;@property(atomic, ......

fyin1314
58分钟前
7
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0
ssh“权限太开放”错误 - ssh “permissions are too open” error

问题: I had a problem with my mac where I couldn't save any kind of file on the disk anymore. 我的Mac出现问题,无法再在磁盘上保存任何类型的文件。 I had to reboot OSX lion and r......

javail
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部