1.安装node,同时也会自动安装npm,npm是node的一种包安装工具. 2.准备一个git,可以用来管理代码. 3.打开vue官网,可以使用vue-cli脚手架工作. 这里介绍一个elementUI框架,饿了么出品. 单文件组件与Vue中的路由  单文件组件:就是以.vue结尾的文件. 路由:就是根据网址的不同,返回不同的内容给用户. ps:@代表src目录 单页应用VS多页应用 多页应用 VUE中的链接写法:<router-link to="/list"></…

一.安装node 1-  点击这里进入node官网下载 2- 3- 下载完成是这样的 4-  双击打开进行安装,一路next,安装完成是这样 5-  打开cmd进入安装node的文件夹,输入node –v,回车,出现版本号说明node安装成功 二.vue-cli的安装 进入cmd找到刚才安装node的文件夹,输入npm install –g vue-cli安装vue-cli,此时安装的vue是2.x版本,如需安装3.x版本需先卸载2.x(通过npm uninstall vue-cli –g),再…

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美…

Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可.本文用Vue-cli从零开始搭建一个Vue项目. 准备工作 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可…

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美?其实不然.最近为了新项目中能更完美的使用vw来做移动端的适配.探讨出一种能解决不兼容viewport单位…

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美?其实不然.最近为了新项目中能更完美的使用vw来做移动端的适配.探讨出一种能解决不兼容viewport单位…

第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vue --version 如果Vue版本太低,先卸载Vue低版本  npm uninstall vue-cli -g 第二步  创建Vue项目 1. 打开要创建路径 2-1.vue CLI3版本输入vue create test创建名为test的项目 接下来会问你一系列的问题 Please pick…

其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项目中也是以这样的方式,没有通过自动化工具来构建vue项目的经验. 新公司的项目是基于vue开发的,用到前端自动化工具,虽说没做过此类项目,但是对于node.webpack这些,之前自己也是玩儿过的,所以上手的话也是很快的,在这里就先简要地记录一下node构建vue项目的步骤吧(包含遇到的坑). 温馨…

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 可以看下我的github:https://github.com/padipata ,里面有我自己写的vue项目,喜欢的给个关注呗. 1.添加cordova项目 $  cordova create myApp1 org.apache.cordova.myApp myApp2 其中: myApp1:cordova目录名 org.apache.cordova.myAp…

准备工作: 安装好必要环境: vue-cli,webpack,node.js,android环境 (http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html): 个人觉得,android环境是最麻烦的,只要配置好,后面的都比较简单. 开始: 第一步:安装cordova 如果已经安装则直接跳过,否则执行以下命令: npm install -g cordova 第二步:新建cordova项目 分别执行3…

准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或  cnpm install echarts -S 安装完成之后,我们就可以开始引入我们需要的echarts了,接下来介绍几种使用echarts的方式. 全局引用: 首先在main.js中引入echarts,将其绑定到vue原型上:  import echarts from 'echarts' Vue.…

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位越来越受到众多浏览器的支持,因此在< 再聊移动端页面的适配>一文中提出了vw 来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美?其实不然.最近为了新项目中能更完美的使用 vw 来做移动端的适配.探讨出一种能解决不兼容 vi…

环境准备工作: 安装node.js 环境  -- 略 安装vue-li  全局安装vue-cli,在命令行中执行npm install -g vue-cli idea准备工作: 安装vue.js File -> Settings -> Plugins -> Browse respositoties 中搜索vue.js  安装 HTML 添加 *.vue类型 File -> Settings -> Editor -> File Types -> HTML  选中 …

前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCode Nodejs:是一个基于Chrome V8引擎的JavaScript运行环境,它结合NPM一起来管理包. NPM:是和Nodejs一起安装的包管理工具,可以解决NodeJS代码部署上的诸多问题:常见的使用场景有以下几种: (1)允许用户从NPM服务器下载别人编写的第三方包到本地使用: (2)允许…

菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js.webpack.vue-cli).cmd打开终端. 1.1 如果还没安装node.js, 则先安装node.js ,安装完成后,查看node版本 node -v 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm…

前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 把打包好的文件(dist/manage文件夹)拷贝到IIS存放网站文件的目录 2:打开IIS服务器,添加网站 鼠标右键"网站",选择添加网站.网站名称:按照用途或者项目起名即可应用程序池:部署前端项目,这个可以忽略,任意选择即可内容目录:网站存放的路径,最好以英文命名(到公司框架层即可)…

前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass-loader等,熟悉webpack的配置.文件的打包,以及路由的配置及使用. 作为自己对Vwebpack+Vue项目搭建知识的总结与笔记. 因内容有案例解读,代码实现,导致篇幅稍长,大约3分钟可以浏览完,如有需要的话(请笔友耐心看完,也可按目录查找所需内容) 百度网盘链接,案例源码获取地址: 链接…

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里…

上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最近h5端的项目,用了webpack+vue-router,用jade+es6+stylus瞬间感觉自己高大上了,es6用起来,感觉也是爽爽哒.(其实语法用的也不多,也就import,一些简单的新方法,主要是箭头函数,再也不用self=this了)所以考虑进行一次升级,使在web端可以简单支持vue…

Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build | build.js | check-versions.js | dev-client.js | dev-server.js | utils.js | vue-loader.conf.js | webpack.base.conf.js | webpack.dev.conf.js | webpack…

最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https://github.com/canfoo/vue2.0-taopiaopiao,大家喜欢的话可以给作者点个fork. 看了下项目的代码,然后决定自己在山寨一下这个项目,从零开始自己搭建下. 第一步就是开始进行项目的初始化了,这里使用了Vue的脚手架,Vue-cli进行项目的基础代码结构搭建.由于使用了vu…

github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3) vue-loader(^12.2.1) eslint(^3.19.0) 需要学习的知识 vue.js vuex vue-router vue-loader webpack2 eslint 内容相当多,尤其是webpack2教程,官方脚手架vue-cli虽然相当完整齐全,但是修改起来还是挺花时间,…

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引…

Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios MINGW64使用简介: 在运行项目的目录下开启,其中,ctrl+c是退出,clear是清除. NPM使用技巧: 国内网络访问npm的速度是比较慢的,所以我们可以采用淘宝开发的cnpm代替. 方便调试查看工具: 谷歌浏览器的vue插件. Vue模块介绍: vuex: 管理核心数据 vue-rout…

快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. 第2步:通过vue-cli来构建项目,vue-cli是vue的脚手架工具,可通过命令行: npm install -g vue-cli 来进行安装.vue-cli只用安装一次,以后可以不用再安装. 第3步:在安装完vue-cli之后,找到自己新建的文件夹,并在这里打开命令提示符cmd.可以通过按住s…

由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 511…

一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝卜是子元素,红萝卜是父元素,白萝卜蹲完不想让红萝卜蹲,怎么办? js是直接用阻止默认事件e.preventDefault(); ,vue虽然也有阻止默认事件 @scroll.prevent,但是并没有效果啊,怎么办啊??有木有同学会啊??? 二.正文 记录下如何更改vue项目运行的端口号 使用web…

一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用webpack这个模板吧,他会自动的将你所要的环境都搭建好 2.输入 vue init webpack myDemo 可创建webpack型的vue项目 其中 webpack为项目模板,可从上图中的5中模板类型中选择其中一种,myDemo是项目名称 如此,一个vue项目自动创建成功,可到对应的项目存放路…

新建Vue项目 1.安装Vue命令行工具,webpack和git,使用淘宝镜像CNPM.参考http://www.imooc.com/video/12299 2.打开命令行,进入到要存放的目录,windows用户可以使用shift+鼠标右键,在想要存放的目录下打开命令行.然后输入"vue init webpack project-name",进入vue新建项目.                                通过提示信息我们可以看到,项目在git上是可以看到的. 3.安…

# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQuery npm install jquery 2.安装Bootstrap npm 以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install 安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 "Bootstrap's JavaScript…