环境搭建

第一步

安装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. nodejs构建mock数据

    Nodejs构建mock数据并通过rest api风格调用接口访问数据 如果我们只有json格式的数据文件,我们想通过访问url方式调用居然数据 确保电脑安装node环境 如果你没有安装好node环境 ...

  2. spark优化设置

    ->>>配置参数优化 SparkConf sc = new SparkConf().setAppName("com.sp.test.GroupTop3").set ...

  3. PTA最短工期

    一个项目由若干个任务组成,任务之间有先后依赖顺序.项目经理需要设置一系列里程碑,在每个里程碑节点处检查任务的完成情况,并启动后续的任务.现给定一个项目中各个任务之间的关系,请你计算出这个项目的最早完工 ...

  4. 点击图片img提交form表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. WIN7无法访问共享打印机及文件的解决办法

    故障: 在网上邻居上能看到对方的电脑名字,双击进入的时候弹出问题.出现“用户账户限制”或“未授予用户在计算机上的请求登陆类型”的问题,这说明我们的局域网和网络是畅通的,问题的根源就在电脑的安全设置上. ...

  6. VUE—打印(原生态网页打印)

    //打印触发的方法 print(e){ let subOutputRankPrin = document.getElementById('printcode'); var options = { fo ...

  7. 【UML】NO.53.EBook.6.UML.2.001-【Thinking In UML 大象 第二版】- 概述

    1.0.0 Summary Tittle:[UML]NO.53.EBook.6.UML.2.001-[Thinking In UML 大象 第二版]- 概述 Style:DesignPattern S ...

  8. openshift 容器云从入门到崩溃之六《Source-to-Image》

    上次说到了怎么在oc上面部署应用而且说道了怎么定义模板部署应用,也许你会奇怪那个我代码打包编译在哪一步,那就要说道oc的s2i流程了 下面是基本s2i流程 1.制作base-image镜像 要使用s2 ...

  9. SQL Server 之 事务与隔离级别实例讲解

    SQL Server 之 事务与隔离级别实例讲解 SQL Server 实现了6个隔离级别来防止并发情况下,类似企图并发的访问或修改同一数据时问题的发生.本文将带你体验全部6个隔离级别.正如你接下来将 ...

  10. pytorch预训练模型的下载地址以及解决下载速度慢的方法

    https://github.com/pytorch/vision/tree/master/torchvision/models 几乎所有的常用预训练模型都在这里面 总结下各种模型的下载地址: 1 R ...