vue项目实战总结
马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口)。
就把前一段时间做过的vue项目,进行一次完整的总结。
这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署。
废话不多说了。干货直接上。
一、 必须node环境, 这次就不写node环境的安装了。过两天我会写个node环境的安装随笔。
二、 node环境配好后。开整vue。
1. 安装vue脚手架。
npm install -g vue-cli
2. 用脚手架搭项目(只是一行命令)
vue init webpack-simple (项目名字)
或
vue init webpack (项目名字)
二者区别(个人理解):
vue init webpack-simple :可以理解为轻巧的,没有多余的配置和包,但能保证项目正常运行。
vue init webpack : 可以理解为完整的,包含比较多配置和包。
3. 本次选用 vue init webpack 完整版的。
(1) 执行完vue init webpack,会遇见以下选项。
完成上述选(按需选择),等把所需依赖下载完后。
(2) 进入刚建的项目里,执行npm install
eg: PS E:\vueTest\vueTest2> npm run dev
当 出现下面的话,就证明你的vue项目已经搭好了。
(3) 打开浏览器,访问 http://localhost:8080,
当出现下面这个页面,说明vue项目正常运行了。框架已搭好。
(4) 骨架已搭好,现在给她血与肉,让她不在骨感。
这次我们用 axios 进行向服务器请求
vuex 来管理我们的前端数据。
我们需要首先安装这两个依赖包,按套路走 : npm install axios vuex --save
在此我做个补充,安装依赖包时,会使用到 --save-dev 或 --save
安装的依赖包会在项目中这个文件package.json中展示
--save: 上线后,要用到的。(执行后,会对应下图中dependencies)
--save-de: 开发时,要用到的包.(执行后,会对应下图中devDependencies)
此处,我也有个问题: 安装的依赖包,是放到 dependencies 中,还是 devDependencies中?
在网上找了半天也没有得到确切答案,只是笼统的说“开发环境用到的包放在devDependencies, 上线用到的依赖包放在dependencies”。所以,我就按自己的理解来放了,vue、vuex、axios、vue-router,放在dependencies,其他依赖包放在 devDependencies, 我的依据就是默认生成框架时,vue、vue-router 会放在dependencies中,所以,我觉得跟vue项目密切相关的vuex、axios也放在dependencies(只是个人见解)。
(5) 依赖包已经安装完,现在。我们来配置 路由(router) 和 数据管理仓库(store)
为了开发的规范和整洁,我把这两块儿,分别放在两个文件夹中
(6) 现在分别来讲。先整 router(路由)。
(7) 数据管理 ————仓库(store)
这个建议先看看官网:https://vuex.vuejs.org/zh-cn/
在这里我就给出细化的分类,以及大致流程图。
在此store文件夹下的js截图:actions.js、 moutations.js、 index.js、 types.js、 getters.js
index.js 负责管理 actions.js 和 moutations.js
actions.js 相当于java,中的service层,相当于是接口。 (如果不熟悉java,你就认为,actions.js的目的是,可以认为这是书的目录。为了让项目整洁,一目了然,清楚阅览actions.js ,每个操存储操作的目的 )
moutations.js 相当于java,中的dao层,与存取数据有关。(如果不熟悉java,你就认为,moutations.js的目的是,存数据,把数据存到变量里,保存起来)。
getters.js 就是获取仓库中数据的方法。 (目的是,把所有的获取数据操作放在一起。方便管理与查找)。
types.js 清楚表明,存数据时,actions.js 的方法 和 moutations.js 中的方法, 一对一对应。这样条理清晰。
大致给出了 actions.js 、 motations 、 getters 三者之间的关系。
(8) vue 中模拟数据。
vue中模拟数据的意义: 当本地测试时,方法会访问模拟数据,当项目上线后,当调用方法时,会直接访‘“.do”请求,问服务器,回去数据库返回的数据。
在vue项目中的创建mock数据: 在static中创建mock文件夹以及config.js如下图
vue项目中如何配置mock数据,以及上线后的请求:
最近做vue项目时,遇到了一个问题,模拟数据时,如何配置mock中的json数据。
旧的vue脚手架中是通过 dev-server.js 来配置mock数据的。
但新的vue脚手架是下图,没有dev-server.js.这时mock数据怎么配置呢? 答案是,mock配置放在 webpack.dev.conf.js中。
找到webpack.dev.conf,js,并进行如下配置。
(9). 项目完成后,打包命令是 npm run build.
会在项目中,生成包。如下图:
(10). 把生成的项目打到服务器上,需要注意路径问题
在项目中的config文件夹下的index.js 中 assetsPublicPath,配置服务器路径。(按需求配置,此处我就用默认的了)
到目前为止,vue相关的问题,大致整完了。
如果看到的朋友,有何疑问,我们可以一起探讨。
此刻已是20180209 17:47,今天放假。我也准备关闭电脑。
看到同事们已经下班。有的拎着行李赶火车,回家过年了。大家都是满脸喜悦,无论我们是少年、还是中年、暮年,团聚与回家的喜悦,都是发自内心,脸上是遮不住的............
vue项目实战总结的更多相关文章
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- vue项目实战
本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...
- Vue 项目实战系列 (一)
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- vue 项目实战 (入门)
环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...
- 详细记录vue项目实战步骤(含vue-cli脚手架)
一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...
- vue项目实战经验汇总
目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- Vue 项目实战系列 (二)
上一章节我们已经把项目的初始化工作完成了,接下来我们再来进行具体的代码编写.这一节我们将完成如下的页面. 我们在src/目录下新建一个views文件夹,存放我们的主要页面文件.目录结构如下: cine ...
随机推荐
- 【Java学习笔记之八】JavaBean中布尔类型使用注意事项
JavaBean是一个标准,遵循标准的Bean是一个带有属性和getters/setters方法的Java类. JavaBean的定义很简单,但是还有有一些地方需要注意,例如Bean中含有boolea ...
- [51nod1709]复杂度分析
给出一棵n个点的树(以1号点为根),定义dep[i]为点i到根路径上点的个数.众所周知,树上最近公共祖先问题可以用倍增算法解决.现在我们需要算出这个算法精确的复杂度.我们定义计算点i和点j最近公共组先 ...
- HDU-5157Harry and magic string
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5157 先从后往前插点,在构造回文树时,让cnt[i]+=cnt[fail[i]],然后维护一个后缀和a. ...
- 2017ecjtu-summer training # 11 POJ 2492
A Bug's Life Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 38280 Accepted: 12452 D ...
- [国嵌笔记][026][ARM伪指令]
ARM机器码 1.汇编程序通过汇编器变成机器码,然后才能在ARM处理器上运行 2.ARM机器码是一个32位的数,被分成了多个段,每个段都有各自的含义 3.格式: cond:表示条件(4位) I:表示源 ...
- screen乱码问题
在 .screenrc下设置: defencoding gbk encoding gbk gbk detatch+reattach后,设置失效,这时可以直接用命令来配置: ctrl+a :defenc ...
- OBS studio最新版配置鉴权推流
这两天在看百度的LSS音视频直播服务的sdk..sdk看了一圈,基本上只能操作个流什么的,查看流列表,域名之类的.按照百度这块的描述自己去实现这个显得不是那么明智我感觉.其次就是百度LSS的教程用的O ...
- PHP性能分析工具xhprof的安装使用与注意事项
前言 xhprof由facebook开源出来的一个PHP性能监控工具,占用资源很少,甚至能够在生产环境中进行部署. 它可以结合graphviz使用,能够以图片的形式很直观的展示代码执行耗时. 下面主要 ...
- Linux 将本地文件上传Linux服务器, 即ssh 命令上传本地文件
http://blog.csdn.net/rodulf/article/details/71169996 利用ssh传输文件 在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下 ...
- [ios 开发笔记]:一句话笔记
1.NSString转int int a=[@"123" intValue]; 同样适用于NSDictionary将NSNumber转为int 2.switch(stateme ...