环境搭建

第一步

安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi;

默认式的安装,默认路径放在d:mode.js(个人根据情况)

安装成功!

新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西

查看是否安装成功 1.node -v     2.npm -v

第二步 基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:

npm install -g cnpm --registry=https://registry.npm.taobao.org,

回车,等待安装...1-2分钟。

第三步 .安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd里

1)输入:cnpm install -g vue-cli,回车,等待安装...

2).输入:vue 回车,若出现vue信息说明表示成功 当前路径下输入:

第四步 创建项目,输入:vue init webpack vue_test(项目文件夹名),回车,等待时间较长

第五步 安装依赖,输入:cd vue_test(项目名),回车,

进入到具体项目文件夹 输入:npm install,回车,vue 等待...。

如果安装成功,回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

第六步 测试环境是否搭建成功:

方法1:输入:npm run dev

方法2:在浏览里输入:localhost:8080(默认端口为8080)

··········································

vue调试工具vue-devtools安装及使用

1.git上的下载路径:(找到存放的盘符,右键Git Bash Here)复制下面的网址,

把vue-devtools克隆下来或者是通过https://github.com/vuejs/vue-devtools把vue-devtools下载下来。

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目录下安装依赖包

cd vue-devtools //进入vue-devtools目录

cnpm install //安装依赖

npm run build     //(这一步一定不要忘了,没有执行这一步的话,项目文件夹shells>chrome文件夹里会少一个src文件 会报错无法加载背景脚本“build/background.js”

注:npm install  或者  cnpm install (cnpm命令是国内的镜像,速度会快一些)

3.修改manifest.json文件

把"persistent":false改成true

4.编译代码 npm run build

5.扩展Chrome插件 Chrome浏览器 >  更多工具 > 拓展程序  点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

6. vue-devtools使用 vue项目, 打开f12, 选择vue就可以使用了. vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试 温情提示:

1).vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2).安装后, 需要关闭浏览器, 再重新打开, 才能使用

VUE环境搭建、创建项目、vue调试工具的更多相关文章

  1. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

  2. vue环境搭建及项目介绍

    搭建开发环境(搭建开发环境前必须安装node.js): 1.安装vue脚手架工具 $ npm install -g vue-cli 2.创建项目(注意项目名字不要有大写字母) vue init < ...

  3. VUE环境搭建,项目配置(Windows下)

    公司想做官网,框架我自己定,然后就选了vue,那现在就来加深一遍vue的环境的搭建吧 1.安装node.js,这里就不再多说了,很简单,如果之前有安装就不用再安装了,可node -v查看node版本 ...

  4. 环境搭建:Vue环境搭建和项目初始化(windows)

    1.    安装node.js 官网下载安装:https://nodejs.org/en/ 版本查看:node -v 注意:node版本最好新一点好,推荐6.0以上. 2.    npm安装webpa ...

  5. 环境搭建:Vue环境搭建和项目初始化(ubuntu)

    1.    安装node.js(版本6.10.3) 首先确保系统安装来gcc,g++,如果没有则安装: $ sudo apt-get update $ sudo apt-get install gcc ...

  6. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  7. vue&uniapp环境搭建以及项目创建(webstorm)

    以下是针对webstorm用户上手uniapp框架的学习 vue环境搭建以及配置(脚手架搭建) 首先要明确三样东西 npm:node.js的包管理器 webpack:主要用途是通过CommonJS 的 ...

  8. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  9. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  10. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

随机推荐

  1. Jenkins+Jmeter持续集成笔记(一:环境准备)

    整体思路: 通过Jmeter图形界面编写api测试脚本 ant 批量执行Jmeter脚本文件 将其集成到jenkins,设置执行频率与发送测试报告 运行环境 系统 配置 IP Centos7.1 1核 ...

  2. 流控制、FlowControl

    这个选项基本上所有网卡都会有,但是叫法会有些差别,比如Realtek网卡叫做流控制,Intel网卡叫做流程控制,还有一些网卡选项干脆是英文的,叫做FlowControl,很多交换机上也有这个功能,也叫 ...

  3. 【二次开发】shopxo商城

    https://shopxo.net/ [问题1:配置邮箱注册]https://ask.shopxo.net/article/19

  4. group_concat的使用

    1.场景 仓库使用系统实现了先进先出,给仓库的备货单原先设计如下模式: tx3表: 不同的批次分开行显示,仓库从这个备货单可以知道这个货品需要备货哪些批次,多少数量 用了几天,仓库对此备货单样式提出如 ...

  5. Vue:Promise概要

    1.Promise中then是异步的 2.Promise 的then里面两个回调,默认第一个resolve,第二个reject:不会进入catch:如果只有一个回调则进入catch var p1=ne ...

  6. Mybatis(二)总结

    1. 输入映射(就是映射文件中可以传入哪些参数类型) 1)基本类型 2)pojo类型 3)Vo类型2. 输出映射(返回的结果集可以有哪些类型) 1)基本类型 2)pojo类型 3)List类型3. 动 ...

  7. 正则表达式(re模块)

    s='hello world' print(s.find('llo')) #找到llo ret=s.replace('ll','xx') #用xx代替ll print(ret) print(s.spl ...

  8. Unity之显示fps功能

    如下: using UnityEngine; using System.Collections; public class ShowFpsOnGUI : MonoBehaviour { public ...

  9. 从AST编译解析谈到写babel插件

    之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...

  10. noip2016海港

    题目描述 Description 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只 ...