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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JS实现的几个常用算法
Nov 12 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
Webpack的dll功能使用
Jun 28 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
在 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
PHP _construct()函数讲解
2019/02/03 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue2.0 路由模式mode="history"的作用
2018/10/18 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python实现二分法算法实例
2015/02/02 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
浅析使用Python操作文件
2017/07/31 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
工程总经理工作职责
2013/12/09 职场文书
男女朋友协议书
2014/04/23 职场文书
班风口号
2014/06/18 职场文书
超市周年庆活动方案
2014/08/16 职场文书
励志演讲稿600字
2014/08/21 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers