很多同学对vue的搭建环境不是很清楚,今天我就和大家一次梳理一下

首先强调的一点是:这不是单单运行vue例子的环境搭建,而是运行一套vue项目
一:下载node并安装
通过https://nodejs.org/en/ 或者 http://nodejs.cn/选择版本并下载,我选择的是最新版,一直点下一步安装即可。
安装完之后打开cmd命令行,敲击命令:node -v 如果结果显示版本号,则表示安装成功


二:安装工程
node的包管理器是npm,简而言之,就是项目中缺少依赖,通过npm安装,这和py中的pip类同,不过npm下载的包好多都是国外的,会受网速等影响,于是很多同学选择淘宝的镜像: 
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm类作为包管理器

1)安装脚手架
npm install vue-cli -g
vue2实战(一):实战开发环境的搭建(windows篇)

2)建立项目
vue init webpack vue-go

其中vue-go是自己起的名字,可换,其他的组件也可以根据不同的需要而换

vue2实战(一):实战开发环境的搭建(windows篇)
可以一直按回车键,也可以根据提示进行修改

Project name::项目名称
Project description:项目描述
Author:作者
……
Use ESLint to lint your code?----------这个暂时选n,这是个代码格式校验,初学者不建议使用,要不然恶心到死的
……

vue2实战(一):实战开发环境的搭建(windows篇)

安装完之后是上面的截图情况,还挺智能的,提醒我们如何进行下一步操作
3)进入到刚才安装的文件夹
cd vue-go


4)之后运行命令
npm run dev
vue2实战(一):实战开发环境的搭建(windows篇)

三:打开浏览器,验证成功
vue2实战(一):实战开发环境的搭建(windows篇)

如果看到上面的页面,恭喜你,已经成功了

下一篇正式讲项目,并梳理出知识点,拭目以待

相关文章: