【前端vue开发架构】vue开发单页项目架构总结



　　下面介绍当前这个示例项目的使用说明，你可以在自己机器上完成示例项目的安装和运行，查看运行效果。然后我们在了解从这种项目的构建，到具体的开发细节。

　　安装

　　使用git clone将示例项目的代码下载到本地。具体git的使用，请查看git的文档。 命令如下：

　　git clone http://120.76.123.62:8081/frontend/act-example.git

　　Cloning into 'act-example'...

　　remote: Counting objects: 71, done.

　　remote: Compressing objects: 100% (63/63), done.

　　remote: Total 71 (delta 8), reused 0 (delta 0)

　　Unpacking objects: 100% (71/71), done.

　　安装node和npm

　　确保本机上有成功安装node及npm。在命令行输入npm后应该可以看到命令执行后的提示信息。

　　安装Json-server

　　在确保node和npm正确安装好以后，通过npm安装json-server(https://www.npmjs.com/package/json-server)。 示例项目主要是使用json-server模拟后端接口API，实际项目中，使用超桌自己的API接口平台。 执行命令行安装json-server：

　　$ npm install -g json-server

　　安装成功后在本地硬盘建立如下的json文件：

　　maxiaoqiangdeMacBook-Pro:~ maxiaoqiang$ cat ~/Temp/fake.json

　　{

　　"users": [

　　{ "id": 1, "name":"混世魔王", "phone":"18620364545", "company":"中国平安-玺越人生","tags":["保障全","收益高","保费低"],"likes":8 }

　　],

　　"companyAndProds" : [

　　{ "name": "中国平安-玺越人生", "value": "中国平安-玺越人生-001"},

　　{ "name": "中国xx-玺越人生", "value": "中国xx-玺越人生-002"},

　　{ "name": "中国人寿-玺越人生", "value": "中国人寿-玺越人生-003"},

　　{ "name": "太平洋保险-玺越人生", "value": "太平洋保险-玺越人生-004"},

　　{ "name": "前海人寿-玺越人生", "value": "前海人寿-玺越人生-005"}

　　],

　　"statistic":

　　然后运行json-server，命令如下：

　　maxiaoqiangdeMacBook-Pro:~ maxiaoqiang$ json-server --watch ~/Temp/fake.json

　　执行成功后会获得如下信息：

　　Resources http://localhost:3000/users http://localhost:3000/companyAndProds http://localhost:3000/statistic

　　`Home`

　　`http://localhost:3000`

　　然后使用浏览器可以访问这些地址看看接口是否正常工作。

　　运行示例项目

　　进入act-example项目目录，然后按照如下操作运行项目：

　　npm install

　　npm run dev

　　运行成功后会弹出一个浏览器，在地址栏中输入 http://localhost:8080/#/start，这样就可以看到开始页面，然后可以进行操作后点击“下一步”。

　　注意如果nom run dev有提示错误信息，很可能是没有安装相应的依赖包，这种情况下，请自行通过如下命令安装：

　　nom install --save-dev