01 2018 档案
摘要：上节课通过一个小Demo我们对Webpack有了初步了解，但是上节课的终端打包方案，在实际开发中并不使用，而是使用Webpack的配置文件的方式进行设置。这节课我们就学一下配置文件的大体结构和入口出口文件的配置。 配置文件webpack.config.js webpack.config.js就是We
阅读全文
摘要：上节课已经安装好了Webpack到电脑上，这节课就开始一个简单的Demo，让你快速上手和熟悉Webpack的基本用法，学习并作完这节课内容你就可以和朋友小吹一下说：我也会Webpack。 建立基本项目结构 首先进入上节课我们建立的webpack_demo目录（每个人建立的位置不同，可能建立在了D盘或
阅读全文
摘要：原文网址：http://jspang.com/2017/09/16/webpack3-2/ 如果您已经在前端行业中，WebPack在业界的流行程度自然必备多说，成为了前端小白升级为前端工程师的必备技能。如果你对webpack还不够熟悉，那你在前端前进的脚步会受到阻碍，但是你幸运的搜索到了这篇文章。（
阅读全文
摘要：随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。 声明模块组： 在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下： 1 2
阅读全文
摘要：actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。（视频中有讲解） 在store.js中声明actions actions是可以
阅读全文
摘要：上传： 1、 assetsPublicPath: './', 修改路径 2、终端输入 npm run build 命令 生成 dist 文件 3、把dist文件里的冬冬上传就可以了 getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它
阅读全文
摘要：找到config 文件夹里的 index.js 找到assetsPublicPath: '/', 该成assetsPublicPath: './', 保存 打开终端->输入 npm-run-build 生成dist 文件 然后把dist文件夹里的文件放到 服务器上就可以了
阅读全文
摘要：上节课我们学习了怎么样读取state，那今天我们学习一下怎么样修改状态。这个常量我们在第一节课的时候也碰到过，并且进行了加减的操作。那这节课我们就具体学习一下，如何操作Mutations。 $store.commit( ) Vuex提供了commit方法来修改状态，我们粘贴出第一节课的代码内容，简单
阅读全文
摘要：在第1节我们已经写了一个 const state ，这个就是我们说的访问状态对象，它就是我们SPA（单页应用程序）中的共享值。今天我们主要学习状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值。我们有三种赋值方式，我们一个一个来学习一下。 一、通过computed
阅读全文
摘要：http://jspang.com/2017/05/03/vuex/ 原文链接 我们还是利用vue-cli 的webpack生成我们的项目结构,如果你对vue-cli的知识不了解，可以花二三十分钟去看一下这个视频教程：http://jspang.com/2017/04/10/vue-cli/ 。项目
阅读全文
摘要：安装：less npm install less --save 非全局安装 -g 全局npm install less-loader --save 终端的操作命令： sudo npm uninstall npm -g 卸载 node sudo npm uninstall vue-cli -g 卸载
阅读全文
摘要：我们通过两节课的讲解，你对vue-cli应该有了基本的了解，这节我们主要了解一下Vue-cli的模板操作，包括增加模板，修改模板，以及一个常规模板的基本结构。 一、npm run build 命令 有小伙伴问我，如何把写好的Vue网页放到服务器上，那我就在这里讲解一下，主要的命令就是要用到npm r
阅读全文
摘要：vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。 Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。 1 2 3 4 5 6 7 8 9 10
阅读全文
摘要：本笔记原文网址：http://jspang.com/2017/04/10/vue-cli/#two 一、安装vue-cli 安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本
阅读全文
摘要：原文网址：http://jspang.com/2017/04/13/vue-router/ 这是这篇文章的最后一节，前10节课的导航都是用<router-link>标签或者直接操作地址栏的形式完成的，那如果在业务逻辑代码中需要跳转页面我们如何操作？这就是我们要说的编程式导航，顾名思义，就是在业务逻辑
阅读全文
摘要：我们知道一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。 路由配置文件中的钩子函数 我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路
阅读全文
摘要：在学习过渡效果的时候，我们学了mode的设置，但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。 mode的两个值 具体的效果我在视频中会有所掩饰，不理解的小伙伴可以到视频中进行查看。 404页面的设置： 用户会经常输错页面，当用户输错页面时，我们希望给他
阅读全文
摘要：<transition>标签 想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。 1 2 3 <transition name="fade"> <router-view ></router-view> </transition
阅读全文
摘要：上节学习了路由的重定向，我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式，我们也可以实现类似重定向的效果。 1.首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，jspang。 1 2 3 4 5 { path:
阅读全文
摘要：开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以
阅读全文
摘要：我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实
阅读全文
摘要：这节课我们讲“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的Ap
阅读全文
摘要：原文网址：http://jspang.com/2017/04/13/vue-router/ 开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显
阅读全文
摘要：http://jspang.com/2017/04/13/vue-router/ 原文网址 我们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那我们这节课学习一下子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改
阅读全文
摘要：安装vue-router vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。 1 npm install vue-router --save-dev 1 npm install vue-router --save-dev 1 1
阅读全文
摘要：我们通过两节课的讲解，你对vue-cli应该有了基本的了解，这节我们主要了解一下Vue-cli的模板操作，包括增加模板，修改模板，以及一个常规模板的基本结构。 一、npm run build 命令 有小伙伴问我，如何把写好的Vue网页放到服务器上，那我就在这里讲解一下，主要的命令就是要用到npm r
阅读全文
摘要：参考链接：http://jspang.com/2017/04/10/vue-cli/ vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力！！！ . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-
阅读全文
摘要：http://jspang.com/2017/04/10/vue-cli/ 原文网址 vue-cli: Vue-cli是vue官方出品的快速构建单页应用的脚手架, 安装vue-cli的前提是你已经安装了npm ,安装npm你可以直接下载node的安装包进行安装 npm-v ：检测npm安装及版本情况
阅读全文
浙公网安备 33010602011771号