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 - ...
随机推荐
- Jenkins+Jmeter持续集成笔记(一:环境准备)
整体思路: 通过Jmeter图形界面编写api测试脚本 ant 批量执行Jmeter脚本文件 将其集成到jenkins,设置执行频率与发送测试报告 运行环境 系统 配置 IP Centos7.1 1核 ...
- 流控制、FlowControl
这个选项基本上所有网卡都会有,但是叫法会有些差别,比如Realtek网卡叫做流控制,Intel网卡叫做流程控制,还有一些网卡选项干脆是英文的,叫做FlowControl,很多交换机上也有这个功能,也叫 ...
- 【二次开发】shopxo商城
https://shopxo.net/ [问题1:配置邮箱注册]https://ask.shopxo.net/article/19
- group_concat的使用
1.场景 仓库使用系统实现了先进先出,给仓库的备货单原先设计如下模式: tx3表: 不同的批次分开行显示,仓库从这个备货单可以知道这个货品需要备货哪些批次,多少数量 用了几天,仓库对此备货单样式提出如 ...
- Vue:Promise概要
1.Promise中then是异步的 2.Promise 的then里面两个回调,默认第一个resolve,第二个reject:不会进入catch:如果只有一个回调则进入catch var p1=ne ...
- Mybatis(二)总结
1. 输入映射(就是映射文件中可以传入哪些参数类型) 1)基本类型 2)pojo类型 3)Vo类型2. 输出映射(返回的结果集可以有哪些类型) 1)基本类型 2)pojo类型 3)List类型3. 动 ...
- 正则表达式(re模块)
s='hello world' print(s.find('llo')) #找到llo ret=s.replace('ll','xx') #用xx代替ll print(ret) print(s.spl ...
- Unity之显示fps功能
如下: using UnityEngine; using System.Collections; public class ShowFpsOnGUI : MonoBehaviour { public ...
- 从AST编译解析谈到写babel插件
之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...
- noip2016海港
题目描述 Description 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只 ...