1.从0搭建前端Vue项目工程

我们通过vue官方提供的脚手架Vue-cli来快速生成一个Vue的项目模板。

**注意：**需要先安装NodeJS，然后才能安装Vue-cli。

环境准备好了，接下来我们需要通过Vue-cli创建一个vue项目，然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目:

• 命令行：直接通过命令行方式创建vue项目

    vue create vue-project01
  

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

      vue ui
    

    图形化界面如下：

    

    1.创建vue项目

    此处我通过第二种图形化界面方式演示。

    首先，我们在桌面创建vue文件夹（自己选择），然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面，如下图所示：

    进入如下界面：

    

    在当前目录下，直接输入命令vue ui进入到vue的图形化界面，如下图所示：

    

    选择创建按钮，在vue文件夹下创建项目，如下图所示：

    

    来到如下界面，进行vue项目的创建：

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

    

    在功能页面开启路由功能，如下图所示：

    配置页面选择语言版本和语法检查规范，如下图所示：

    创建项目，进入如下界面：

    只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

    到此，vue项目创建结束。

    2.vue项目目录结构介绍

    通过VS Code打开之前创建的vue文件夹，打开之后，呈现如下图所示页面：

    vue项目的标准目录结构以及目录对应的解释如下图所示:

    其中我们平时开发代码就是在src目录下。

    3.运行vue项目

    运行vue项目主要提供了2种方式：

    第一种方式：通过VS Code提供的图形化界面 ，如下图所示：

    （注意：NPM脚本窗口默认不显示，第一种方法：打开一个json文件然后直接关闭vscode，再次打开vscode。最好是package.json。然后重启。

    第二种方法：如果第一种方法无法解决，可以可以试试下面的方法：项目文件夹-> 右键 ->勾选NPM脚本

    或者点击项目右侧三个点勾选NPM脚本）

    

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

    

    最终浏览器打开后，呈现如下界面，表示项目运行成功。

    

    其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码：添加内容Vue

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

    

    这就是我们vue项目的热更新功能 。

    对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：

    devServer:{
        port:7000
    }
    

    如下图所示，然后关闭服务器（点击终端处，再按ctrl+c，再输入y即可），并且重新启动。

    

    

    第二种方式：命令行方式

    直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve即可，如下图所示：