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

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

一、安装node.js

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

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

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

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

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

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

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

键盘输入【win+R】,输入【cmd】,回车;

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

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

由于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.js从安装环境搭建到创建第一个项目

命令行输入【vue】,显示如下:

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

三、新建vue项目

键盘输入【win+R】,输入【cmd】,回车;

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

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

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

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

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

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

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

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

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

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

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

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

创建成功,如下。

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

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

测试是否能够启动。

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

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

编译成功即可,

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

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

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

点击任意网址,即可看到前端界面,表明vue工程已经启动。vue.js从安装环境搭建到创建第一个项目

四、开发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