vue.js从安装环境搭建到创建第一个项目
第一次接触vue.js,在网上参考了很多大神的资料,总结整理如下,方便自己以后再次使用,以及提供给看到这篇文章的小伙伴参考~
一、安装node.js
1、官网或中文网下载node.js。
中文网网址: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
参考文章: