云商城开发文档

一、网站题目

在线云商城，基于HTML+CSS+Js+Vue制作。

二、网站描述

1. 使用VsCode开发工具
2. node版本：v10.15.1
3. npm版本：6.4.1

三、准备工作

1.安装Node.js

​ 打开Node.js官方网站，找到Node.js下载地址，如下图所示：

安装LTS的版本进行下载并且安装，如下图所示：

安装完成后，打开git-bash命令行工具，查看Node.js版本信息，如下图所示:

为了提交开发效率，可以利用npm安装淘宝镜像的cnpm，示例代码如下：

2.安装vue-devtools

首先下载vue-devtools-5.1.1.zip压缩包到本地，然后将压缩包进行解压，然后在命令行中切换到解压好的vue-devtools-5.1.1目录，输入以下命令进行依赖安装：npm install。示例代码如下：

将压缩包进行解压，然后在命令行中切换到解压好的vue-devtools-5.1.1目录，输入以下命令进行依赖安装。示例代码如下：

将插件添加至chrome浏览器。单击浏览器地址栏右边的按钮，在弹出的菜单中选择“更多工具”-“扩展程序”，如下图所示：

在上图中，单击“加载已解压的扩展程序”按钮，此时会弹出选择框，需要用户选择扩展程序目录。找到vue-devtools-5.1.1/shells/chrome目录，将其添加到扩展程序中，配置完成后，可以看到当前vue-devtools工具信息，并在Chrome浏览器窗口的右上角会显示Vue的标识，如下图所示：

3.安装Vue脚手架

打开命令行工具，通过npm方式全局安装@vue/cli脚手架，如下图所示：

安装完成后，为了检测是否安装成功，如下图所示：

4.安装vue-router

使用npm方式为项目安装vue-router，将路由文件单独存放在src目录下的router.js文件中。当组件准备好之后，开始创建路由。如下图所示：

安装完成后，将router.js路由文件创建出来，具体代码如下。

创建router.js文件后，需要在src\main.js入口文件中引入该文件，并在Vue实例上注册，如下所示：

保存上述代码，启动服务进行测试，如下所示：