最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下. 一.工具环境 1.node.js 6.10.0,目前node.js最新版本是8.7.0,可以到官网下载最新版本安装.链接:http://nodejs.cn/download/ 2.编辑器,Hbuilder 8.8.4 3.windows 8.1 二.创建项目 1.安装node.js,默认安装在"C:\Program Files\nodejs&…

这几天完成了歌曲收藏功能,先看最后效果: 新注册用户:“newuser”,进入“我的音乐界面如下所示” 点击新建歌单,输入:“新歌单”,确认,如下: 目前还没有歌曲,打开音乐界面,点击收藏功能,如下,可以看到新创建的歌单已经在上面: 把歌曲收藏在新歌单,在打开我的音乐界面,已经收藏好了: 点击删除之后,可以看到歌曲已经被删除: 删除歌单: 基本的功能就是这样,有一些细节就不展示了,下面是实现,整体功能的实现,跟前面没太大区别,利用vue-resource和后台通信,发送请求,在后台利用mongo…

这是完成了预想中的最后两个功能:歌曲评论以及歌曲搜索. 1.评论效果: 用户点击评论按钮,评论框获取焦点. 输入之后点击提交,下方显示评论,用户名称以及日期.相应的用户也可以删除自己评论. 当然只能删除自己的评论,鼠标放置其他人评论上面不会显示删除按钮. 2.搜索歌曲 搜索可以搜索歌曲或者歌手,这里搜索"LiSA",结果如下: 也可以只输入“A”,显示如下: 这里有一个歌手页面,显示的是所有歌手的歌曲,如点击"Aimer"歌手: 至此,基本功能就展示完成,下面看实现…

上一篇遗漏了一个简单的效果没写,见下图: 主页面点击热门推荐和更多之后跳转到歌曲列表页面,现在的页面只是简单的把所有歌曲列出来,没有进行排序.实现起来也很简单,在MainPage的两个链接上添加: <div id="recommend-head"> <router-link to="/PopularMusic">热门推荐</router-link> <router-link to="/PopularMusic&qu…

上一篇文章讲到的是如何利用mongoose从数据库读取数据然后更新页面,接下来要实现的就是用户注册登录功能,这个功能涉及到的东西太多了,今天只实现了登录功能,登陆之后更新导航条界面,最后效果如下: 登录之前: 登陆之后(用户名:oujiamin): 这是登陆界面(还没有设置css): 主要实现步骤: 1.校验 所谓校验就是对用户的输入进行限制并且给出一点提示,这里使用的是vee-validate插件,该插件主要作用就在于可以很方便地绑定input标签并且给出校验规则和提示语,使用步骤: 安装:n…

1.利用vue-router实现页面跳转 程序可以正常运行之后,下面我们需要配置路由实现页面的局部刷新,这一功能将用来实现网站页面的跳转. 打开程序目录,进入"src\router\index.js",可以看到程序已经配置了一个路由和其相关联的组件. 这里引入了"vue-router",并且新建了一个Router对象,对象里有一个routes属性,是一个对象数组.routes的每一个对象都有以下属性: path:表示程序当前在什么路径下就需要渲染,"/&q…

上一篇文章中说到这一篇博客会实现音乐播放功能,只是令我意外的是,如果利用h5的audio标签,几行代码就实现了......先来看一下最终效果吧. 这里直接用了audio标签,样式没有怎么管,能获得音乐文件并且播放就足够了. 所以后面我利用了两天的时间,在看了一遍vue官方文档,然后看了vue-router + vue-resource,再学习了mongodb和mongoose,安装了Mongodb数据库,下载了mongo可视化工具robomongo并且学习使用,最后要实现的效果就是利用node.…

1.利用router-link在组件之间传递数据 如上图,MainPage.vue中主要有8个推荐曲目数据,主要实现方式是建立好主页面模板,然后用v-for循环获取返回的music对象,然后分别绑定曲目,代码如下: ul作为承载8个曲目的模板,利用v-for="music in musics"遍历musics数组,依次生成li标签填充页面.musics为一个对象数组,其内容是8个对象,具体实现如下图所示: 在dev-server.js中先把请求到的json函数(appData)复制一份…

Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用view展示首页,标签页,网站管理员(也就是本人啦)信息页,以及文章详情页. settings.py 因为到这个阶段需要编写html文件了,但是每一个网页的每一行代码都靠自己去写,各种渲染也靠自己去写的话,太麻烦了,Django提供了html模板功能,可以在settings.py里面进行配置. #…

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje…

如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大概一周吧 下了最新的vue脚手架也就是3.0版本,还得自己配置config文件 怎么升级3.0,我就不多说了,网上太多了 10分钟上手最新vue脚手架 比如上面这篇讲的还是很通俗易懂的 init之后, npm install 开始下包 有人问,elementui这个包不用下载吗,要下载,不过不是通过…

当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS 安装 node.js>https://blog.csdn.net/weixin_41791279/article/details/86470711 2.安装淘宝npm镜像 由于npm 服务器是国外的 使用起来比较慢 我们这里使用淘宝的cnpm镜像来安装@vue/cli 淘宝的cnpm命令管理工具可以代替…

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新…

github.com 作为最流行的源代码管理工具已经风靡全球,同时在依托于github也衍生出了各种各样的应用,比如可以利用github搭建博客系统等等. 先换个话题,我们每人手头都或多或少有些"藏"书,这里的"藏"我打了引号,因为这些书可能真的是"藏"起来了,说不定藏在那个角落.我一直有个想法,就是发起这样一个公益项目,让每个人的"藏"书流动起来,充分发挥它的价值,于是就有了这样的项目 - 地图图书馆 (http://www…

1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件夹: vue init webpack(webpack-simple如果是安装简单版的以后就会自己配置一些东西) 工程名称 5.最后再在文件里下载依赖: npm  install 6.目录结构差不多就是这样:…

参考 http://gorails.com/setup/ubuntu/16.04 概述 Project 2 主要探究对web的攻击,本次试验共有6个部分. Project 2中攻击的是一个提供电子货币服务网站--bitbar(使用ruby 2.4和rails 5.0.2实现). bitbar网站的搭建: 服务器环境搭建 安装Ruby2.4和rails 5.0.2 http://gorails.com/setup/ubuntu/16.04 按照上面网址的布置安装Ruby 2.4和rail 5.0.…

报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter…

HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据. 当你获取 Web Socket 连接后,你可以通过 send() 方法来向…

开始学习Vue的小白,dalao多多指正 想要实现下面这个界面,包含总价计算.数量增加和移除功能 话不多说代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"…

前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的.这点在接下来的内容中我们可以慢慢感受. 关于项目的构建其实类似的文章网上有很多,但我还是重新写了一下,一是为了确保项目能够运行成功,二是对几个细节作了解释,三是加入了使用 IDE 的构建方法. 在动手操作之前,我希望大家已经清楚什么是 "前后端分离" ,什么是 "…

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service) 一个开发环境依赖,局部安装在每个 @vue/cli 创建的项目中. 可升级 ? 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展.-- cli 插件是用来给 we…

  因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建vue项目模板.但是最近新建项目的时候发现,即使是在本机全局安装了vue最新版本2.5.17,可是用vue-cli脚手架创建vue项目木板的时候发现,vue的版本还是2.5.2版本.查过官方文档之后了解到,vue-cli有最新版本,需要重新安装,而且新建项目的方式也有所不同.这篇文章将针对vue以及v…

https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖: 可升级: 基于 webpack 构建,并…

Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Django搭建博客网站(三) 要用到的package django-pagedown markdown2 django-pagedown用来在后台生成markdown编辑器,markdown2则是用来将markdown解析成html显示在网页上. install $ pip install django-…

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如…

原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.…

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如…

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c…

利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用Makrdown来写文档是一个非常好的选择,第二点自然想到了git, 第三点用一个静态的网站来浏览和管理是一个不错的选择,这里选择了hugo. Hugo是由Go语言实现的静态网站生成器. 注意是生成器.他虽然自带webserver,但是没有Nigix强大了. 他能非常方便的把markdown文件转换为…

目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用vue.js + mint-ui + .net core api的小说网站. 最近在学习vue.js,而抛开实践的学习都是在装逼,所以结合实际,准备做一个小说网站,这样麻麻再也不用担心我在看小说时被不良信息侵扰了哈哈. 首先说明一下,小说数据来源于网络搜索,并不直接存储于自己的服务器中,所以,这是一个…