环境搭建

第一步

安装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. day5_不能循环删除list-深拷贝、浅拷贝(import copy)

    一.循环删list里面的元素,会导致下标错位,结果是不对的举例:想删除奇数 l = [1,1,1,2,3,4,5] for i in l: if i%2 !=0: l.remove(i) #删除后,导 ...

  2. centos7编译安装Python3所需要的库(模块)依赖

    在centos中编译安装python3环境,第三方的库 实战的编辑环境: 1.VMware虚拟机   2.centos7 依赖包经过百度搜集以及之前安装Python3报错搜集(centos7反反复复安 ...

  3. 关于Oracle归档的一些操作

    1.查看日志模式archive log list,或者select name,log_mode from v$database; 2.数据库非归档模式改为归档模式: 关闭数据库:shutdown im ...

  4. python基础(3)-pycharm安装&for循环&format字符串&list列表&set集合使用

    安装IDE(PyCharm)&破解 点击下载安装包,安装. 点击下载破解补丁. 进入pycharm安装bin目录,将破解补丁copy到当前目录. 在bin目录下找到pycharm.exe.vm ...

  5. python基础(14)-反射&类的内置函数

    反射 几个反射相关的函数可参考python基础(10)-匿名函数&内置函数中2.2.4反射相关 类的一些内置函数 __str__()&__repr__() 重写__str__()函数类 ...

  6. 使用maven搭建springMVC开发环境

    1.引入框架所需的包,pom.xml文件中添加如下配置: <dependency> <groupId>org.springframework</groupId> & ...

  7. es6阮一峰读后感

    不经意间看了你一眼(阮一峰的es6读后感)我自己常用的 字符串篇:ES6 为字符串添加了遍历器接口(详见<Iterator>一章),使得字符串可以被for...of循环遍历.只要有遍历器接 ...

  8. python 爬虫-1

    买了本书在自学,我也不知道自己能学到什么地步,反正不用这个找工作,纯属爱好,有可能之后就会放弃 233333333.... 先来一个特别简单点的:将百度搜索主页  扒下来,并保存到一个文件里面 fir ...

  9. UVA 12345 Dynamic len(带修莫队)

    Dynamic len [题目链接]Dynamic len [题目类型]带修莫队 &题解: 莫队可以单点更改,只要再多加一维,代表查询次数,排序的时候3个关键字. 之后循环离线的时候,先暴力时 ...

  10. CentOS 7 keepalived+LVS

    LVS架构中 , 不管是NAT模式还是DR模式 , 当后端的RS宕机了 , 调度器还是会把请求转发到宕掉的RS上 , 然而keepalived可以解决该问题 , 它不仅仅有高可用的功能 , 还有负载均 ...