营销型网站如何建设,wordpress 外链插件,用wordpress 登录界面,下拉网站导航用ps怎么做马上过年了#xff0c;最近工作不太忙#xff0c;再加上本人最近比较懒#xff0c;毫无斗志#xff0c;不愿学习新东西#xff0c;或许是要过年的缘故(感觉像是在找接口)。 就把前一段时间做过的vue项目#xff0c;进行一次完整的总结。 这次算是详细总结#xff0c;会从… 马上过年了最近工作不太忙再加上本人最近比较懒毫无斗志不愿学习新东西或许是要过年的缘故(感觉像是在找接口)。 就把前一段时间做过的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今天放假。我也准备关闭电脑。 看到同事们已经下班。有的拎着行李赶火车回家过年了。大家都是满脸喜悦无论我们是少年、还是中年、暮年团聚与回家的喜悦都是发自内心脸上是遮不住的............ 转载于:https://www.cnblogs.com/tlsmile/p/8427951.html
