vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一

最近自己做了一个vue做前端,nodejs做后的完整项目,在此过程遇到的问题和收获的心得分享出来,希望能和大家交流探讨。
项目搭建步骤
1.首先要确保计算机上安装了nodejs环境,才能进行以下步骤(nodejs环境安装);
2.使用淘宝镜像:npm config set registry http://registry.npm.taobao.org(安装这个是因为我们用的npm的服务器是外国的,有的时候我们安装“依赖”的时候很慢很慢超级慢,所以使用淘宝镜像下载安装速度会快很多,如下图):
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一_第1张图片
3.分别全局vue组件、vue-cli组件、webpack组件:安装命令分别为npm i vue -g、npm i vue-cli -g、npm i webpack -g(-g表示全局安装,-S表示安装到当前项目的模块中),安装分别如下图:
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一_第2张图片
4.至此所需要的安装组件已经全部安装完毕,我在计算机G盘下新建了一个名为Test的项目,所以命令行先进入该目录,如下图:
在这里插入图片描述
此时的空项目目录如下图(.idea文件见是我的IDEA编辑器自己的构建文件,和项目无关):
在这里插入图片描述
5.用vue-cli脚手架初始化项目,在命令行输入vue init webpack,然后 傻瓜式按回车键一步一步进行操作,如果你项目名称里有大写那进行到 ? Project name这里应该输入小写的项目名再按回车继续如图,在这里插入图片描述最后边三个选择n(从Use ESLint to lint your code? 开始),最后一项 ? Should we run npm install for you after the project has been created? (recommended)选择第三项No, I will handle that myself再按回车,如图在这里插入图片描述具体操作如下图所示:
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一_第3张图片
至此项目已经自动生成,项目目录如下图:
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一_第4张图片
6.启动本地测试服务器,在命令行依次输入npm i(安装所需要的依赖,执行一次,以后启动不用再执行,直接npm start就行)和npm start,如下图:
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一_第5张图片
至此本地服务器已经启动,在浏览器输入localhost:8080,如下图:
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一_第6张图片
注意:现在你的计算机上已经安装了vue、vuec-cli、webpack,所以以后搭建其他项目只需要从步骤4开始就行。

你可能感兴趣的:(Web,Vue)