vue2构建SPA

2024年1月30日 167次阅读 来源: HEJAX

原理

 页面url构成
 http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace
  1. http:// 页面使用的协议
  2. www.xxx.com 页面所属域名
  3. /index.html 文件名称（路径）
  4. ?name=&old= get方式传递的参数
  5. #mylove/// 页面的锚点
    前4项发生改变时，会触发跳转或刷新，而锚点发生变化时，并不会跳转和刷新，因此，几乎所有的spa都是利用锚点来实现路由转换的。
    vue的url结构：http://localhost:8080/#/setting/task

RESTful接口风格

 我们所做的大多数的操作，都是对数据库的四种操作“增删改查”，对应到的接口操作：
  1. post 插入新数据
  2. delete 删除数据
  3. put 修改数据
  4. get 查询数据
    约定，并非强制。表层看，除get外其他方式都一样，深层看，所有方式都一样，统一规范，做了约定。

安装
vue-cil是vue的脚手架工具，先全局安装vue-cil

sudo npm install -g vue-cli
cd vue-test
Vue init webpack vuedemo
cd vuedemo
npm install
npm run dev

Js standard
语法规则

  • 使用两个空格缩进
  • 字符串使用单引号
  • 不再有冗余变量
  • 无分号
  • 行首不要以 ( [ ` 开头
  • 关键字后加空格
  • 函数名后加空格
  • 使用===，摒弃==
  • 处理node中回调传递回来的err
  • 文件末尾留空行
  • 使用全局变量，加上window. document和navigator除外

项目目录及文件结构

├── README.md // 项目说明文档
├── node_modules // 项目依赖包文件夹
├── build // 编译配置文件，一般不用管
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 项目基本设置文件夹
│ ├── dev.env.js // 开发配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件
├── index.html // 项目入口文件
├── package-lock.json // npm5 新增文件，优化性能
├── package.json // 项目依赖包配置文件
├── src // 我们的项目的源码编写文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始项目资源目录，回头删掉
│ │ └── logo.png
│ ├── components // 组件目录
│ │ └── Hello.vue // 测试组件，回头删除
│ ├── main.js // 主配置文件
│ └── router // 路由配置文件夹
│ └── index.js // 路由配置文件
└── static // 资源放置目录

   绝大多数操作，在src下进行，默认的src结构简单，需重新整理，static目录也需要根据不同的资源创建不同的子文件夹。

这里要做两个页面，一个列表一个详情页，整理后的src结构如下：

├── App.vue // APP入口文件
├── api // 接口调用工具文件夹
│ └── index.js // 接口调用工具
├── components // 组件文件夹，目前为空
├── config // 项目配置文件夹
│ └── index.js // 项目配置文件
├── frame // 子路由文件夹
│ └── frame.vue // 默认子路由文件
├── main.js // 项目配置文件
├── page // 我们的页面组件文件夹
│ ├── content.vue // 准备些 cnodejs 的内容页面
│ └── index.vue // 准备些 cnodejs 的列表页面
├── router // 路由配置文件夹
│ └── index.js // 路由配置文件
├── style // scss 样式存放目录
│ ├── base // 基础样式存放目录
│ │ ├── _base.scss // 基础样式文件
│ │ ├── _color.scss // 项目颜色配置变量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 浏览器初始化文件
│ ├── scss // 页面样式文件夹
│ │ ├── _content.scss // 内容页面样式文件
│ │ └── _index.scss // 列表样式文件
│ └── style.scss // 主样式文件
└── utils // 常用工具文件夹
|–index.js // 常用工具文件

    原文作者：HEJAX
    原文地址: https://segmentfault.com/a/1190000017419358
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞