（十四）Vue全栈——前后端连载

写在前面：

项目需要vue-cli 3.0版本，所以需要卸载以前的版本，安装最新版本。

卸载安装教程：安装教程

卸载旧版本：npm uninstall vue-cli -g

安装新版本：cnpm install -g @vue/cli

查看当前版本：vue -V

查看当前版本

注意：但是我不知道为啥，全局安装cnpm之后，用npm命令安装vue cli的时候会报错，所以我安装命令用的是cnpm

1、写前端，创建项目

• 创建项目

在之前的后端项目下，创建前端项目

输入命令 ： vue create client client是前端项目名，可以更改

之后的各项选择：

操作

上面表示要安装些什么，a是全选，空格是选中，再按一次空格是取消。

后面几项选择：

操作

1 表示操作

2 表示要安装些什么

3 表示需要使用历史模板吗，我选择的yes

4 把安装文件存在哪，我存在package.json里面的

5 表示要把自己这次操作存储为一个模板吗，这样可以下次使用，我没有存储，选择no

然后回车就好啦。出现以下内容表示前端构建成功

前端成功效果

• 启动前端

  到前端文件夹下：cd client

  输入命令启动：npm run serve

2、前后端连载

我们发现前后端启动得分开启动，想把他们连载一起启动。此时需要做如下操作：(注意是在总的项目目录下操作，不是client目录下)

• 安装concurrently cnpm install concurrently

  concurrently 模块作用是把多个终端启动的项目绑定到一起

• 前端配置

  在client/package.json中添加启动配置："start": "npm run serve"

前端配置

• 前后端连载

  在根目录下面的package.json文件下面输入如下命令：

前后端连载

• "client-install":"npm install --prefix client"

​   代表启动的时候会装client里面的依赖模块。

• "client":"npm start --prefix client"

表示启动前端的项目，后面的prefix client表示路径。

• "dev":"concurrently \"npm run server\" \"npm run client\""

  这条命令表示连载前后端，启动他们只需要输入 npm run dev命令。

• 运行结果

运行结果

表示连载成功。