1.开发环境的准备工作

  • IDE

    可以选择WebStom或者VisualStudio Code
  • Node.js的安装

    node + npm
  • 调试环境

    Google Chrome + Vue.js

2.什么是nvm

nvm:Node Version Manager，作为前端node依赖包管理工具，可以更好的管理Node的版本

3.nvm的安装

nvm windows 下载地址

选择上面的进行下载，将下载的文件进行解压：nvm-setup.exe，单击开始安装，直接点击下一步就可以。

4.测试nvm版本安装是否成功

nvm --version

5.查看本地安装的node版本

nvm list

6.使用命令查看远程服务器node版本

nvm ls-remote

7.使用命令下载最新版本

nvm install v11.7.0

8.使用命令使用node版本（切换）

nvm use v11.7.0

9.淘宝npm镜像

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

完成上命令，即可使用cnpm

10.chrome浏览器安装vue调试器vue-devtools

下载地址

下载vue-devtools完成后打开命令行cmd进入vue-devtools文件夹,输入命令：

cnpm install



编译通过以后输入以下命令：

cnpm run build

找到shells\chrome文件夹下面的manifest.json文件，把persistent改为true



打开谷歌浏览器，开启开发者模式，找到【更多工具-扩展工具】，加载已解压的扩展程序，找到目录下shell/chrome，确定即可

构建Vue开发环境的更多相关文章

  1. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  2. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  3. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  4. express+mysql+vue开发环境搭建

    最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...

  5. 面试官：自己搭建过vue开发环境吗？

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

  6. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  7. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  8. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  9. 从源代码构建 Go 开发环境

    从源代码构建 Go 开发环境 Go 1.5 之前的版本 安装C 语言开发环境 在Go 1.5 之前的版本(比如 1.3.1.4),都会部分的依赖 C 语言的工具链,所以如果你有C 语言的开发环境,就可 ...

随机推荐

  1. 虚拟主机服务器php fsockopen函数被禁用的解决方法

    为了服务器安全考虑很多主机商禁用了php的fsockopen函数,昨天进博客,使用cos-html-cache生成静态文件,尼玛提示: Warning: fsockopen() has been di ...

  2. THUSC2017 游记

    你若安好,便是晴天. Day 0 中午就要出发了,上午浮躁的不行,根本写不下题去. 到了火车站之后发现教练和lyc和ztc在4车靠近5车的那一边,然而我在5车靠近4车的那边,尴尬…… 本来是想着上了火 ...

  3. css的元素表现

    块级元素和行内元素的表现: 块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行. 块级 ...

  4. Spring Boot—19Session

    pom.xm <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  5. mkdir failed for img Read-only file system

    最简单的方法就是打开模拟起,然后 windows-->show view-->file explorer-->mnt-->sdcard (最好在该目录下重新创建个文件夹)选中文 ...

  6. jdk下载及安装

    下载下载 jdk 下载 java se 版本的即可. web 开发前不需要像安装 java se 一样安装java ee,只要在项目中添加 java ee 的jar 包就可以了,里面大多是接口和抽象类 ...

  7. java基础(八) 深入解析常量池与装拆箱机制

    引言   本文将介绍常量池 与 装箱拆箱机制,之所以将两者合在一起介绍,是因为网上不少文章在谈到常量池时,将包装类的缓存机制,java常量池,不加区别地混在一起讨论,更有甚者完全将这两者视为一个整体, ...

  8. mac下连接阿里云总是提示密码是吧，permission denied

    早上使用mac连接阿里云服务器 ,总是提示 连接拒绝 之前还是好好的,密码自己有没有改过...     搞了半天,是 没输入用户名.... 上图中 输入 用户 然后输入密码就行了.

  9. 搜索关键字自动更正 - Oracle Endeca Server

    做了几个Oracle Endeca 电商项目.每个项目都会有搜过关键字拼写错误更正(Spelling Correction)的需求.淘宝也有类似功能. Oracle Endeca Sever提供了关键 ...

  10. Oracle案例11——Oracle表空间数据库文件收缩

    我们经常会遇到数据库磁盘空间爆满的问题,或由于归档日志突增.或由于数据文件过多.大导致磁盘使用紧俏.这里主要说的场景是磁盘空间本身很大,但表空间对应的数据文件初始化的时候就直接顶满了磁盘空间,导致经常 ...