1、脚手架vue-cli安装

npm install -g vue-cli

(npm init -f  生成package.json文件)

vue init webpack myapp

cd myapp

npm install

npm run dev

2、资源准备,目录设计

3、项目中的问题及解决方案
  ①定义全局方法:(在入口页面定义)

Vue.prototype.$loading = {
method: this.showProgress
};
方法调用:this.$loading.method  ②查询具体ID或类名的元素
document.querySelectorAll('.name #id')[0]  //查询到的结果为数组
												

基于vue的实战步骤的更多相关文章

  1. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  2. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

  3. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  4. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

  5. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  6. [vue最新实战] gank客户端(vue2 + vue-router2 + vuex +webpace + es6)新手福利,干货多多

    vue-meizi 本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程.代码简单易懂,注释多多.实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待.先发布预览版本,后面更多更全的功能和 ...

  7. 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  8. 基于 Vue.js 之 iView UI 框架非工程化实践记要

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...

  9. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

随机推荐

  1. 安装archlinux的linux命令记录

    磁盘的分区:cfdisk 格式化分区:mkfs.ext4,mkswap,swapon 查看所有分区:lsblk /dev/sda 先挂载 / 分区:mount /dev/sda1 /mnt archl ...

  2. 怎样下载youtube的字幕

    第一步:安装chrome浏览器 第二步:安装Tampermonkey扩展. google.com的页面 第三步:使用下面两个链接安装(点进去后点击安装此脚本即可)脚本1,脚本2

  3. photoshop cc 安装失败 2%

    photoshop cc 安装失败 2%   C盘--Program Files---Common Files--Adobe--caps ,把这个文件夹中的文件全部删除,然后再安装     C:\Pr ...

  4. python学习教程,史上最全面的python学习路线图

    Python 是Web 开发.游戏脚本.计算机视觉.物联网管理和机器人开发的主流语言之一,随着Python用户可以预期的增长,它还有机会在多个领域里登顶.Python学习路线分享给你. 阶段一是Pyt ...

  5. 解决eclipse修改后台代码ctrl+s总是【自动重启服务器】问题

    每次修改后台代码保存总是自启动服务很是耗时,以下设置可以解决你的烦恼: 双击你要设置的项目: 点击ok,最后ctrl+s一下就搞定了. 这时候你随便修改后台代码随便ctrl+s都不会重新启动服务器.b ...

  6. msf下的各种生成payload命令

    Often one of the most useful (and to the beginner underrated) abilities of Metasploit is the msfpayl ...

  7. eclipse的springboot插件

    eclipse的springboot插件官网下载地址还喜欢捉迷藏,正确的下载路径修改方法: 点击zip,然后复制出官网路径如下 http://download.springsource.com/rel ...

  8. Java基础学习-HelloWorld案例常见问题

    注意:控制台曾经写过的命令,我们可以通过上下箭头进行选择,不需要重新进行输入,以节省时间,提高效率.   1.单词拼写问题     -class    不要写成Class     -String    ...

  9. 牛客练习赛43C Tachibana Kanade Loves Review

    题目地址 Link 题解 虚点这种东西还是没有掌握好啊. 考虑建一个虚点,向已经学会的东西连一条边权为0的边,关系正常连边,单独学的从虚点连一条边过去. 然后做一遍最小生成树就得到答案了. 这题略卡常 ...

  10. Python作业

    1使用while 循环输入1,2,3,4,5,6,,8,9,10 count = 0 while count<10: count+=1 if count ==7: continue print( ...