浅谈Vue前端项目搭建

提示：内容仅代表个人观点，如有不对请多指教。

文章目录

前言

一、Node.js

二、vue脚手架

三、初始化项目

四、启动项目

---

前言

该文章用于记录前端项目搭建的流程，后续会同步更新，有用的话请多多收藏。

一、Node.js

官网地址：下载 | Node.js 中文网

对应的 NPM（Node Package Manager），是Node.js 环境中的软件包管理器。随 Node.js 一起被安装，因此 NPM 和 Node 是两个独立的应用程序，只是被捆绑安装了，两个的版本号并不相同。

Node.js 规定在每一个软件包中都必须包含一个叫做 package.json 的文件。它是应用程序的描述文件，包含和应用程序相关的信息，比如应用名称，应用版本，应用作者等等。通过 package.json 文件可以方便管理应用和发布应用。

创建 package.json 文件:

npm init

此时会进行package.json文件的初始设置

可以直接enter执行下去：

输入之后即会创建默认选项的描述文件

当然，也可以直接快速创建 package.json 文件:

npm init --yes

二、vue脚手架

全局安装vue-cli脚手架

npm install --global vue-cli

Vue-CLI（Vue Commond-Line Interface）：Vue的命令行界面，俗称脚手架，可用于快速配置Webpack和代码结构。

三、初始化项目

此时就可以创建一个"裸奔"的Vue项目了：

vue init webpack demo

由于权限安全原因，此处不进行项目截图。

四、启动项目

输入命令即可完成项目的本地启动：

npm run dev