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

╰半夏微凉° 2023-09-25 11:56 59阅读 0赞

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

安装

使用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

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关单页应用架构

概述 [单页应用程序 (SPA][_SPA] ) 是创建非常有吸引力和独特的用户体验的绝佳方式。Gmail、Google Maps、Airbnb、Netflix、Pint

本是古典何须时尚/ 2023年10月01日 18:30/ 0 赞/ 30 阅读

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

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

╰半夏微凉°/ 2023年09月25日 11:56/ 0 赞/ 60 阅读

相关基于Vue的前端架构设计

基于Vue的前端架构设计　　MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑

冷不防/ 2023年09月25日 11:49/ 0 赞/ 49 阅读

相关 Vue前端开发规范

基于Vue官方风格指南整理一、强制 1. 组件名为多个单词 > 组件名应该始终是多个单词的，根组件 App 除外。正例： export d

比眉伴天荒/ 2022年12月29日 14:05/ 0 赞/ 151 阅读

相关 vue 项目前端开发流程

一前端开发流程 1 添加路由文件的位置：E:\\vue-sdgt\\src\\router\\index.js 2 设置跳转页面路径 ![waterm

缺乏、安全感/ 2022年09月15日 05:58/ 0 赞/ 189 阅读

相关前端开发规范之项目架构

前端开发whqet,csdn,王海庆,whqet,前端开发专家翻译自：[www.sitepoint.com][] 翻译人员：[前端开发whqet][whqet]，意译为主

快来打我*/ 2022年08月06日 07:08/ 0 赞/ 195 阅读

相关从0到1架构webpack+vue前端项目，你自己搭建过vue开发环境吗

前言: 平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 `npm run install` 安装依赖，`npm run se

喜欢ヅ旅行/ 2022年05月21日 12:09/ 0 赞/ 240 阅读

相关 Vue实战项目开发--首页开发

首页开发注意：项目的图片资源都是去哪儿网站的在线图片([图片来源网站][Link 1]),只可以用来练习哦，小心侵权 1. 首页header区域开发

左手的ㄟ右手/ 2022年05月12日 16:08/ 0 赞/ 270 阅读

相关前端vue项目开发流程

1. 产品给出需求文档，产品原型 2. 阅读文档，梳理需求 3. 评审需求（产品逻辑、交互是否合理） 4. UI出图，交互设计稿 5. 开始做详细设计（拆分需求模块，

浅浅的花香味﹌/ 2022年03月25日 07:05/ 0 赞/ 289 阅读

相关 vue后台管理系统项目标准完整的目录开发架构

![vue项目标准目录结构][vue] 注意：里面的部分文件夹可根据自己项目需求进行删减（比如lang，icons，mock，vendor这些文件夹），vendor文件夹用来

Bertha 。/ 2021年10月31日 15:56/ 0 赞/ 378 阅读