从零开始搭建VUE项目

一、node.js的下载安装

介绍：vue项目运行的一个环境

下载：https://nodejs.org/en/download/

测试：npm -v

成功标志：

二、VUE学习【实战】

（1）新建步骤：

1 .打开idea,新建项目
Create New Project > Static Web>填写project name和选择保存的工作空间>Finish

 

 

2.安装vue脚手架工具

• 首先安装npm的淘宝镜像(下载速度比较快)，打开idea的Terminal

   

  

   

  输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

• 等待下载完成以后，继续安装vue的脚手架工具，在Terminal内继续输入以下命令
• 这里注意是-V，大写大写

测试是否安装成功：
vue -V

• 脚手架安装完成后，初始化包结构,继续输入

vue init webpack demo

• demo为你前面新建的项目名。初始化会进行设置。可参考此处设置。

• 初始化完成后。依次在Terminal输入图片内的黄色文字

   

  

• 完成后，会提示在哪个端口可以访问，此处现在是8080

  

• 打开浏览器输入：localhost:8081,出现以下画面，简单的demo就搭建完成了 。

到此，一个VUE项目就新建结束了。

此时，项目的目录为：