1.安装git命令行工具:https://git-scm.com/
下载之后会有三个工具:git cmd,git bash,git gui,后面创建vue项目要用到git bash,
使用命令行工具,依次输入:node -v和npm -v,若能显示版本号,则说明安装成功。
小记:git 是基于linux的工具,在一些场合下会比windows 下的cmd方便
2.安装node.js :https://nodejs.org/en/
下载安装最新8.11.1LTS版本,安装过程,注意安装路径;其它均是点击next傻瓜式安装。
小记:Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统<官网介绍>,了解更多node.js可以看看知乎上node.js是什么的讨论。
3.配置node.js环境
a.配置npm命令安装全局模块的安装路径,默认情况下npm的全局模块安装路径设置在C盘下,这样会占用C盘空间,且不方便查看;
配置步骤:1.首先在node.js的安装目录根目录下新建两个文件夹:node_global和node_cache(第二步cache配置用到);
2.打开命令行工具,输入 npm config set prefix "刚刚新建的node_global文件夹路径”
如: npm config set prefix D:\Program Files\nodejs\node_global
注意prefix与路径间有空格,没有空格会配置失败
b.配置缓存cache的路径;
配置步骤:输入 npm config set cache "刚刚新建的node_cache文件夹路径“
c.设置环境变量:
设置步骤:1.系统变量中新增NODE-PATH,变量值:“node_gloabal路径/node_modules”;
2.用户变量中修改Path变量
输入:npm install express -g
(这一步还存在疑问,查阅一些资料说安装成功后会显示下图1所示,而我安装后是图2,怀疑是不是npm版本问题)
图2,图片来源:https://www.cnblogs.com/zhouyu2017/p/6485265.html
图2
4.安装Vue cli
vue cli是vue的脚手架工具。
步骤:1.输入 nmp install -g vue-cli
(速度较慢,大多数资料推荐使用淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
)
2.输入vue -V查看版本,若显示版本号,则安装成功。
(注意V是大写的)
5.新建vue项目
首先在你要创建项目的文件夹下,打开git bash;(这个时候就体现git bash 的优势了,windows的cmd还要一层一层进来)
步骤:1.输入: vue init webpack 项目名称
如:vue init webpack firstvue
(小记:在我的学习中,它是一个打包工具,打包脚本、样式、资源等等)
2.按照提示依次输入相关参数,如图4
这里只在install vue-routeh后输入yes
图4
(背景中的白色是 csdn水印,不要误解)
3.输入这些后在底部会出现提示,按照提示操作即可运行vue,如图5
图5
4.检查效果
执行npm run dev之后,会在最后显示一个地址:https://localhost:8080,如图5
图5 (默认端口是8080.可能会出现其它应用占用)
打开浏览器打开访问这个地址,若能出现下图(图6)结构的页面即vue正在运行:
图6 ( 这里我把图片改成我女神了,哈哈哈)
6.编辑项目,基于webstorm
若未安装webstorm,先安装.附破解方法:https://blog.csdn.net/voke_/article/details/76418116,测试可用。
打开项目文件。如图7:
主要在src编辑自己的内容,这部分还未深入学习。
参考:1.https://blog.csdn.net/wisewrong/article/details/55212684
2.https://www.cnblogs.com/zhouyu2017/p/6485265.html
4.https://www.zhihu.com/question/33578075
5.https://blog.csdn.net/bruceyangjie/article/details/70168985
7.https://baike.baidu.com/item/GIT/12647237?fr=aladdin
文章中出现的链接不再重新列出。