构建Vue开发环境
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开发环境的更多相关文章
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- 【原创】windows下搭建vue开发环境+IIS部署
[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安 ...
- windows下搭建vue开发环境+IIS部署
原创]win10下搭建vue开发环境 https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...
- express+mysql+vue开发环境搭建
最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...
- 面试官:自己搭建过vue开发环境吗?
开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...
- 1.WIN10下搭建vue开发环境
WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 从源代码构建 Go 开发环境
从源代码构建 Go 开发环境 Go 1.5 之前的版本 安装C 语言开发环境 在Go 1.5 之前的版本(比如 1.3.1.4),都会部分的依赖 C 语言的工具链,所以如果你有C 语言的开发环境,就可 ...
随机推荐
- java-接口和抽象类的联系和区别。
接口和抽象类的联系和区别. 一,简单总结 1.抽象类和接口都不能直接实例化,如果要实例化,抽象类变量必须指向实现所有抽象方法的子类对象,接口变量必须指向实现所有接口方法的类对象. 2.抽象类要被子类继 ...
- HTML5 Boilerplate
time: 2016-10-20 20:00 HTML5 Boilerplate(H5BP)是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Moderni ...
- PHP匹配当前传入是何种类型
本文出至:新太潮流网络博客 /** * [is_string_regular_type 正则自动验证传入数据] * @E-mial wuliqiang_aa@163.com * @TIME 2017- ...
- microsoft azure 映像发布前的检查清单
在发布映像提交到 Azure 镜像市场之前,请确保以下检查单全部通过: 产品映像要求 产品映像必须满足如下要求: 适用于生产环境,Azure 镜像市场原则上不接受测试版本产品上架 映像为自包含映像,所 ...
- Oracle EBS 复制用户职责
DECLARE l_new_user_name ) := 'HAND_HYL'; l_new_password ) :'; l_new_user_id NUMBER; l_user_name_copy ...
- C语言const与#define
const 定义的是变量不是常量,只是这个变量的值不允许改变是常变量!带有类型.编译运行的时候起作用存在类型检查. define 定义的是不带类型的常数,只进行简单的字符替换.在预编译的时候起作用,不 ...
- flask 的管理模块的功能add_template_global、send_from_directory
add_template_global方法 全局模板函数 add_template_global 装饰器直接将函数注册为模板全局函数. add_template_global 这个方式是自定义的全局函 ...
- [翻译] CoreImage-with-EAGLContext
CoreImage-with-EAGLContext https://github.com/anaglik/CoreImage-with-EAGLContext Simple example of d ...
- 初识HTML和WEB标准
初识HTML和WEB标准 什么是 HTML? HTML 超文本标记语言的缩写(Hyper Text Markup Language) HTML 并不是编程语言,而是一种标记语言(markup lang ...
- win10想说爱你不容易——安装.net3.5也是一个坑(已有完美解决方法)
最终完美解决方法:经过多次波折,终于找到无法正常安装.net3.5的原因了,是因为已删除的用户还有注册表残留导致的,而且这个问题还会影响一个win10更新的安装,导致每天更新失败,撤销更新... 详见 ...