vue.js从安装环境搭建到创建第一个项目

第一次接触vue.js，在网上参考了很多大神的资料，总结整理如下，方便自己以后再次使用，以及提供给看到这篇文章的小伙伴参考~

一、安装node.js

1、官网或中文网下载node.js。

官网网址：https://nodejs.org/en/

中文网网址：http://nodejs.cn/download/

我是在中文网下载的，直接选择的Windows 64位版本。

下载后node.js后安装，我是一路next，更改了安装目录到D盘，install，finish。

安装完成，接下来测试一下是否安装成功。

键盘输入【win+R】，输入【cmd】，回车；

分别输入【node -v】和【npm -v】，若能分别输出版本号，则安装成功。

由于npm在国内使用时很慢，因此下载淘宝的cnpm。

键盘输入【win+R】，输入【cmd】，回车；

输入【npm install -g cnpm --registry=https://registry.npm.taobao.org】，下载安装完成即可。

2、配置node环境。

参照：https://www.cnblogs.com/zhouyu2017/p/6485265.html

二、vue-cli脚手架搭建

键盘输入【win+R】，输入【cmd】，回车；

以下安装的两种方式择其一即可：

（1）cnpm安装：输入【cnpm install --global vue-cli】

（2）npm安装：输入【npm install -g @vue/cli】

安装完成后，命令行输入【vue -V】,显示如下：

命令行输入【vue】，显示如下：

三、新建vue项目

键盘输入【win+R】，输入【cmd】，回车；

输入【vue ui】，浏览器自动打开图形界面（vue3.0以上版本支持）。

在图形界面中选择【创建】，

输入项目文件夹名，点击【下一步】，

选择【手动】，点击【下一步】，

创建成功，如下。

测试是否能够启动。

点击【任务】-->【serve】-->【运行】，

编译成功即可，

点击【输出】，能看到访问网址，

点击任意网址，即可看到前端界面，表明vue工程已经启动。

四、开发vue001项目

第三步用于创建vue项目，且vue项目只能通过命令行或者上文的图形操作界面进行创建。

测试vue项目可以启动后，在命令行输入【CTRL+C】停止服务，然后使用任意顺手的工具比如idea，Vscode，WebStorm等导入创建好的项目进行开发。

我目前使用的idea，导入vue项目之后，先安装vue.js插件，然后进行开发。

先到这里，以后再补充hhhh

 

参考文章：

https://www.cnblogs.com/winter92/p/7117057.html

https://www.cnblogs.com/zhouyu2017/p/6485265.html