**注意#xff1a;**需要先安装NodeJS#xff0c;然后才能安装Vue-cli。

环境准备好了#xff0c;接下来我们需要通过Vue-cli创建一个vue项目#xff0c;然后再学习一下vue项目的结构。

Vue-cli提供了如下2种方式创建vue项目:

vue

vue-project01图形化界面通过命令先进入到图形化界面然后再进行vue工程的创建

vue

首先我们在桌面创建vue文件夹自己选择然后双击进入文件夹来到地址下直接输入命令vue

预设模板选择手动如下图所示

注意NPM脚本窗口默认不显示第一种方法打开一个json文件然后直接关闭vscode再次打开vscode。

最好是package.json。

然后重启。

第二种方法如果第一种方法无法解决可以可以试试下面的方法项目文件夹-

-勾选NPM脚本

点击之后等待片刻即可运行在终端界面中我们发现项目是运行在本地服务的8080端口我们直接通过浏览器打开地址

src/App.vue这个根组件此时我们打开这个组件修改代码添加内容Vue

只要保存更新的代码直接打开浏览器不需要做任何刷新发现页面呈现内容发生了变化如下图所示

对于8080端口经常被占用所以我们可以去修改默认的8080端口。

我们修改vue.config.js文件的内容添加如下代码

devServer:{port:7000

}如下图所示然后关闭服务器点击终端处再按ctrlc再输入y即可并且重新启动。

第二种方式命令行方式