vue项目实战总结篇


Posted in Javascript onFebruary 11, 2018

这篇文章把小编前段时间做的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,会遇见以下选项。

vue项目实战总结篇

 完成上述选(按需选择),等把所需依赖下载完后。

 (2) 进入刚建的项目里,执行npm install

eg: PS E:\vueTest\vueTest2> npm run dev

当 出现下面的话,就证明你的vue项目已经搭好了。

 vue项目实战总结篇

 (3) 打开浏览器,访问http://localhost:8080,

当出现下面这个页面,说明vue项目正常运行了。框架已搭好。

vue项目实战总结篇

(4) 骨架已搭好,现在给她血与肉,让她不在骨感。

这次我们用 axios 进行向服务器请求

  vuex 来管理我们的前端数据。

我们需要首先安装这两个依赖包,按套路走 : npm install axios vuex --save

在此我做个补充,安装依赖包时,会使用到 --save-dev 或 --save

安装的依赖包会在项目中这个文件package.json中展示

--save: 上线后,要用到的。(执行后,会对应下图中dependencies)

--save-de: 开发时,要用到的包.(执行后,会对应下图中devDependencies)

 

vue项目实战总结篇

此处,我也有个问题: 安装的依赖包,是放到dependencies 中,还是devDependencies中?

在网上找了半天也没有得到确切答案,只是笼统的说“开发环境用到的包放在devDependencies, 上线用到的依赖包放在dependencies”。所以,我就按自己的理解来放了,vue、vuex、axios、vue-router,放在dependencies,其他依赖包放在

devDependencies,

我的依据就是默认生成框架时,vue、vue-router 会放在dependencies中,所以,我觉得跟vue项目密切相关的vuex、axios也放在dependencies(只是个人见解)。

(5) 依赖包已经安装完,现在。我们来配置 路由(router) 和 数据管理仓库(store)

为了开发的规范和整洁,我把这两块儿,分别放在两个文件夹中

vue项目实战总结篇

  (6) 现在分别来讲。先整 router(路由)。

vue项目实战总结篇

(7) 数据管理 ————仓库(store)

这个建议先看看官网: https://vuex.vuejs.org/zh-cn/

在这里我就给出细化的分类,以及大致流程图。

在此store文件夹下的js截图:actions.js、 moutations.js、 index.js、 types.js、 getters.js

vue项目实战总结篇vue项目实战总结篇vue项目实战总结篇vue项目实战总结篇

vue项目实战总结篇

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 三者之间的关系。

vue项目实战总结篇

(8) vue 中模拟数据。

vue中模拟数据的意义: 当本地测试时,方法会访问模拟数据,当项目上线后,当调用方法时,会直接访‘“.do”请求,问服务器,回去数据库返回的数据。

在vue项目中的创建mock数据: 在static中创建mock文件夹以及config.js如下图

vue项目实战总结篇

vue项目中如何配置mock数据,以及上线后的请求:

最近做vue项目时,遇到了一个问题,模拟数据时,如何配置mock中的json数据。

旧的vue脚手架中是通过 dev-server.js 来配置mock数据的。

vue项目实战总结篇

但新的vue脚手架是下图,没有dev-server.js.这时mock数据怎么配置呢? 答案是,mock配置放在 webpack.dev.conf.js中。

vue项目实战总结篇

找到webpack.dev.conf,js,并进行如下配置。

vue项目实战总结篇

vue项目实战总结篇

 (9). 项目完成后,打包命令是 npm run build.

会在项目中,生成包。如下图:

vue项目实战总结篇

(10). 把生成的项目打到服务器上,需要注意路径问题

在项目中的config文件夹下的index.js 中assetsPublicPath,配置服务器路径。(按需求配置,此处我就用默认的了)

vue项目实战总结篇

到目前为止,vue相关的问题,大致整完了。

Javascript 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
在 Angular中 使用 Lodash 的方法
Feb 11 #Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 #Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
Vue实现点击后文字变色切换方法
Feb 11 #Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 #Javascript
vue刷新和tab切换实例
Feb 11 #Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
基于python编写的微博应用
2014/10/17 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python三方库之requests的快速上手
2019/03/04 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python3实现简单飞机大战
2020/11/29 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
中间件分为哪几类
2012/03/14 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
工程移交协议书
2016/03/24 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL