VUE环境搭建、创建项目、vue调试工具
环境搭建
第一步
安装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调试工具的更多相关文章
- Vue环境搭建和项目创建
目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...
- vue环境搭建及项目介绍
搭建开发环境(搭建开发环境前必须安装node.js): 1.安装vue脚手架工具 $ npm install -g vue-cli 2.创建项目(注意项目名字不要有大写字母) vue init < ...
- VUE环境搭建,项目配置(Windows下)
公司想做官网,框架我自己定,然后就选了vue,那现在就来加深一遍vue的环境的搭建吧 1.安装node.js,这里就不再多说了,很简单,如果之前有安装就不用再安装了,可node -v查看node版本 ...
- 环境搭建:Vue环境搭建和项目初始化(windows)
1. 安装node.js 官网下载安装:https://nodejs.org/en/ 版本查看:node -v 注意:node版本最好新一点好,推荐6.0以上. 2. npm安装webpa ...
- 环境搭建:Vue环境搭建和项目初始化(ubuntu)
1. 安装node.js(版本6.10.3) 首先确保系统安装来gcc,g++,如果没有则安装: $ sudo apt-get update $ sudo apt-get install gcc ...
- 前端(二十三)—— Vue环境搭建
目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...
- vue&uniapp环境搭建以及项目创建(webstorm)
以下是针对webstorm用户上手uniapp框架的学习 vue环境搭建以及配置(脚手架搭建) 首先要明确三样东西 npm:node.js的包管理器 webpack:主要用途是通过CommonJS 的 ...
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期
目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...
- Vue环境搭建、创建与启动、案例
vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...
随机推荐
- day5_不能循环删除list-深拷贝、浅拷贝(import copy)
一.循环删list里面的元素,会导致下标错位,结果是不对的举例:想删除奇数 l = [1,1,1,2,3,4,5] for i in l: if i%2 !=0: l.remove(i) #删除后,导 ...
- centos7编译安装Python3所需要的库(模块)依赖
在centos中编译安装python3环境,第三方的库 实战的编辑环境: 1.VMware虚拟机 2.centos7 依赖包经过百度搜集以及之前安装Python3报错搜集(centos7反反复复安 ...
- 关于Oracle归档的一些操作
1.查看日志模式archive log list,或者select name,log_mode from v$database; 2.数据库非归档模式改为归档模式: 关闭数据库:shutdown im ...
- python基础(3)-pycharm安装&for循环&format字符串&list列表&set集合使用
安装IDE(PyCharm)&破解 点击下载安装包,安装. 点击下载破解补丁. 进入pycharm安装bin目录,将破解补丁copy到当前目录. 在bin目录下找到pycharm.exe.vm ...
- python基础(14)-反射&类的内置函数
反射 几个反射相关的函数可参考python基础(10)-匿名函数&内置函数中2.2.4反射相关 类的一些内置函数 __str__()&__repr__() 重写__str__()函数类 ...
- 使用maven搭建springMVC开发环境
1.引入框架所需的包,pom.xml文件中添加如下配置: <dependency> <groupId>org.springframework</groupId> & ...
- es6阮一峰读后感
不经意间看了你一眼(阮一峰的es6读后感)我自己常用的 字符串篇:ES6 为字符串添加了遍历器接口(详见<Iterator>一章),使得字符串可以被for...of循环遍历.只要有遍历器接 ...
- python 爬虫-1
买了本书在自学,我也不知道自己能学到什么地步,反正不用这个找工作,纯属爱好,有可能之后就会放弃 233333333.... 先来一个特别简单点的:将百度搜索主页 扒下来,并保存到一个文件里面 fir ...
- UVA 12345 Dynamic len(带修莫队)
Dynamic len [题目链接]Dynamic len [题目类型]带修莫队 &题解: 莫队可以单点更改,只要再多加一维,代表查询次数,排序的时候3个关键字. 之后循环离线的时候,先暴力时 ...
- CentOS 7 keepalived+LVS
LVS架构中 , 不管是NAT模式还是DR模式 , 当后端的RS宕机了 , 调度器还是会把请求转发到宕掉的RS上 , 然而keepalived可以解决该问题 , 它不仅仅有高可用的功能 , 还有负载均 ...