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. CodeForces762A

    A. k-th divisor time limit per test:2 seconds memory limit per test:256 megabytes input:standard inp ...

  2. windows 查看端口

    windowsnetstat命令查看进程:netstat -ano查看占用端口进程:netstat -ano|findstr “端口号”,例子netstat -ano|findstr “8080”.t ...

  3. 在MyBatis中查询数据、涉及多参数的数据访问操作、插入数据时获取数据自增长的id、关联表查询操作、动态SQL、关于配置MyBatis映射没有代码提示的解决方案

    1. 单元测试 在单元测试中,每个测试方法都需要执行相同的前置代码和后置代码,则可以自定义2个方法,分别在这2个方法中执行前置代码和后置代码,并为这2个方法添加@Before和@After注解,然后, ...

  4. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Python 底层原理知识

    1.Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一.对象的引用计数机制 Python内部使用引用计数,来保持追踪内存中的对象,所有对象都 ...

  6. 3.HTML颜色

    一,HTML 颜色采用的是 RGB 颜色,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色. <p st ...

  7. Oracle 数据库执行慢SQL

    ) hou, - ))) mini, c.sql_address, c.inst_id,f.full_name,u.user_name, b.user_concurrent_program_name, ...

  8. SQL SERVER Management Studio编写SQL时没有智能提示的解决方式

    1. 检查设置里是否启用智能感知(Intellisence),可以在“工具”→“选项”里设置 2. 如果启用后还是无效,可以新建一个查询窗口查询,输入关键词的前面几个字母看是否有提示(或者使用Ctrl ...

  9. Asp.net MVC + Signalr 实现多人聊天室

    Asp.net SignalR 简介: 首先简单介绍一下Signalr ,我也是刚接触,觉得挺好玩的,然后写了一个多人聊天室. Asp.net SignalR 是为Asp.net 开发人员提供的一个库 ...

  10. Flask配置文件和 路由系统

    debug = True开启debug模式 当你的代码在界面增减之后不用刷新界面自动更新 app.logger.error("这是error模式") app.logger.info ...