从零开始启动一个Vue项目

目录

一、首先下载Node.js

二、安装vue脚手架vue-cli

三、使用vue-ui创建一个vue项目

四、vue项目目录结构

五、启动vue项目

方法一：cmd窗口启动

方法二：软件中启动 

---

一、首先下载Node.js

可以去看我的上一篇博客： NodeJs的安装及环境配置-CSDN博客

二、安装vue脚手架vue-cli

1、进入管理员模式的命令行

2、然后在命令行输入指令：

npm install -g @vue/cli

3、完成后，检查是否安装成功：

vue --version

vue -V

上面两条命令都可以查看脚手架版本

也可以使用下述命令查看vue版本：

npm list vue

(注意要切换到项目目录下使用此命令) 

运行结果如下:

三、使用vue-ui创建一个vue项目

1、以管理员身份打开cmd终端，进入需要创建项目的目录后，输入以下指令：

vue ui

2、然后就会在浏览器打开一个窗口，可以在该窗口进行创建vue项目：

① 首先进入创建项目页面

② 点击在此创建新项目

③ 对创建的项目进行相关配置

④ 点击创建项目

⑤ 等待项目创建完成

创建项目大概需要一段时间稍作等待：

创建完后会进入下面界面：

⑥ 查看创建好的项目文件

四、vue项目目录结构

vue项目目录结构 ：

大致结构如上图所示，若想更深一步了解可自行搜索

五、启动vue项目

方法一：cmd窗口启动

在项目目录命令行界面，输入：

npm run serve

在浏览器输入下面链接即可打开vue的初始界面

方法二：软件中启动 

也可以在别的软件中打开，效果同上，都是打开终端使用npm run serve命令启动vue

注意：是要在vue项目目录下使用npm run serve，比如这里的话是在vue-project目录下使用此命令。

如果项目是前后端分离的话，则是在前端文件目录下使用此命令，而不是在项目文件目录下使用此命令