vue脚手架搭建项目（详细教程）

目录

1.node环境的安装和配置

2.vue脚手架环境安装

3.vue项目的创建

4.项目运行流程

1.node环境的安装和配置

下载地址：https://nodejs.org/zh-cn/download/

根据自己电脑系统及位数选择，我的电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。

下载步骤

 

 

 

 

 

配置环境变量

 

 

 

 

查看是否安装成功  node -V 在cmd运行

 一部分常用命令

npm -v：查看npm安装的版本。
npm init：会引导你建立一个package.json文件，包括名称、版本、作者等信息。
npm list：查看当前目录下已安装的node包。
npm ls：查看当前目录下已安装的node包。
npm install moduleNames：安装Node模块到本地目录node_modules下。
npm install < name > -g：将包安装到全局环境中。
npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有

① 打开安装的目录（默认安装情况下在C:\Program Files\nodejs）

② 在安装目录下新建两个文件夹【node_global】和【node_cache】

再次打开cmd命令窗口，输入npm config set prefix “你的路径\node_global”

npm config set prefix "C:\NODE\nodejs\node_global"

npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录

npm config set cache "C:\NODE\nodejs\node_cache"

.vue脚手架环境安装

脚手架：可以理解为自动帮我们构建项目的工具。 vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。前提是我们已经安装好脚手架

设置环境变量，打开【系统属性】-【高级】-【环境变量】，在系统变量中新建

变量名：NODE_PATH

变量值：C:\Program Files\nodejs\node_global\node_modules

安装我们常需要的模块如下图

 由于下载速度较慢，我们可以使用国外镜像 cmd执行

npm install -g cnpm --registry=https://registry.npmmirror.com

3.vue项目的创建

Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具）命令行界面。

环境安装

命令行执行

1.安装vue

npm install vue

2.安装webpack（Webpack：是一个开源的前端打包工具。）

npm install webpack -g

安装vue脚手架：

npm i -g @vue/cli-init

vue-cli2.x创建项目：

vue init webpack 项目名称

vue-cli3.x创建项目：

vue-cli3.x创建项目：
vue create projectname

4.项目运行流程

1.进入终端执行命令

npm run serve

2.成功运行如图