vue2构建SPA

67次阅读

共计 1919 个字符,预计需要花费 5 分钟才能阅读完成。

原理
页面 url 构成
http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace

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

RESTful 接口风格
我们所做的大多数的操作,都是对数据库的四种操作“增删改查”,对应到的接口操作:

post 插入新数据
delete 删除数据
put 修改数据
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 // 常用工具文件

正文完
 0