十二、VueJs 填坑日记之项目打包发布

十二、VueJs 填坑日记之项目打包发布

通过上一篇博文的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于 nodejs 开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式。这章,我们来讲解这部分内容。

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题。今天我们来重新调整一下列表页面和内容页面,使我们做的后台管理系统更有范儿。

十、VueJs 填坑日记之在项目中使用Amaze UI

十、VueJs 填坑日记之在项目中使用Amaze UI

上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI)。先来介绍一下妹子UI。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。最主要是妹子UI的性能好,轻量级。

九、VueJs 填坑日记之在项目中使用jQuery

九、VueJs 填坑日记之在项目中使用jQuery

首先呢,jQuery 是提供了 npm 的安装包的。我们的 vue-cli 脚手架,也是支持引入的。不过设置比较麻烦,如果你对使用这种方法比较敢兴趣,可以直接参考下面的内容。好,我们不说这种方式引入 jQuery 而是引用文件的方式引用。

八、VueJs 填坑日记之参数传递及内容页面的开发

八、VueJs 填坑日记之参数传递及内容页面的开发

其他的内容,我们在列表页面已经见过了。这里第一次出现 这个东西。同样是渲染内容, v-html 和 v-text 有什么区别呢?其实区别非常简单,v-text 会把所有的内容当成字符串给直接输出出来。而 v-html 会把字符串给转换为 html 标记语言给渲染出来。

七、VueJs 填坑日记之渲染一个列表

七、VueJs 填坑日记之渲染一个列表

在上一篇博文中,我们对vue组件有了一个简单的认识和大概的理解。在之前认识项目结构的时候,我们在/src目录中创建了一个components的文件夹,而今天就要用到了,这个文件夹的作用就是放置我们的自定义组件。

六、VueJs 填坑日记之初识*.Vue文件

六、VueJs 填坑日记之初识*.Vue文件

首先,我们用 vue-cli 脚手架搭建的项目,里面我们已经遇到了很多,如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西?如果是初次接触 vue 开发的同学,可能之前没有见过这个东西。*.vue 文件,是一个自定义的文件类型,用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块

五、VueJs 填坑日记之将接口用webpack代理到本地

五、VueJs 填坑日记之将接口用webpack代理到本地

那么如何解决这个问题呢?其实很简单,要知道 跨域不是接口的限制 而是浏览器为了保障数据安全做的限制。因此,一种方法可以解决,那就是打开浏览器的限制,让我们可以顺利的进行开发。但是无奈的是,最新的 chrome 浏览器好像已经关闭了这个选项,那么我们只能采用另外一种方法了——将接口代理到本地。

四、VueJs 填坑日记之搭建Axios接口请求工具

四、VueJs 填坑日记之搭建Axios接口请求工具

支持ajax请求的工具很多,像superagent和axios。今天我们用的就是axios,因为听说最近网上大部分的教程书籍都使用的是axios,本身axios这个工具就已经做了很好的优化和封装,但是在使用时,还是比较繁琐,所以我们来重新封装一下。

三、VueJs 填坑日记之项目文件认识

三、VueJs 填坑日记之项目文件认识

上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行。在这一篇,我们将认识vuejs项目里的各个目录结构。