Vue2-Vue开发环境搭建

一、IDE编辑器：Vscode，自行下载安装即可

二、三种引入方式， 教程使用方式一引入

Vue官网：https://v2.cn.vuejs.org/v2/guide/installation.html

方式一：直接script引入

教程下载开发版本，下载到本地，放到对应的文件中即可。

生产版本是开发版本的压缩版，删除了警告功能等。

在script标签中引入，注意文件目录结构

方式二：CDN在线引入，使用需要外网环境

方式三：NPM安装

初学者不建议使用NPM，因为NPM一般需要配合vue-cli脚手架进行综合项目开发，比较复杂，待有了基础之后，后续会讲解。

三、安装之后验证

安装之后实际上会引入一个Vue大对象，chrome浏览器打开网页

打开网页之后，F12打开console控制台，输入Vue回车,就可以看到Vue对象函数

当我们注释掉引入vue时候，会出现报错

但是当我们都配置完成之后，控制会出现一下警告提示

第一条：为了更好的开发体验请下载Vue开发工具，点击下面链接进入chrome商城进行安装，但是国内一般访问不了chrome商城，这里提供了离线安装方法，百度网盘下载

Vue.crx下载提取码：6666

一、Chrome浏览器安装方式：
①：点击右上角三个点
②：点击更多工具
③：点击扩展程序
④：点击右上角的开发者模式，将他启用
⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可

第二条：意思是你在使用开发者模式，但是当你切换到生产环境不可以使用开发者模式的Vue，这是提示，不是错误。

官网上可以看到

在浏览器中查看验证

至此，环境搭建完毕

Vue2-Vue开发环境搭建相关推荐

Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
vue开发环境搭建Mac版
一.前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
Vue开发环境搭建及在docs新建vue项目
参考: https://www.cnblogs.com/winter92/p/7117057.html (写在开头的废话:相信很多人在学习vue这个框架时,最开始搭建开发环境,容易遇到一些大大小小的坑 ...
vue 开发环境搭建
1.创建vue项目 1.node js 生成项目,编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功如果安装 ...
Vue开发环境搭建和vue-cli脚手架
vue本质是一个js脚本,提供了一个前端框架.在开发时,可以直接引入这个js脚本,也可以使用脚手架工具,在本地搭建一个项目. Vue.js安装方法一.在 Vue.js 的官网上直接下载 vue.mi ...
Vue开发环境搭建详细操作（NodeCnpmVue）
目录一.安装node.js 二.安装cnpm 三.安装Vue 四.常用命令五.其他扩展信息一.安装node.js 1.官网下载地址:Download | Node.js 2.设置nodejs p ...
Cesium Vue开发环境搭建
最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程.官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程. 一 ...
VS Code + Vue 开发环境搭建
1.下载并安装 Visual Studio Code 2019 2.Visual Studio Code 2019安装成功后,打开VS Code 工具点击左侧[扩展]菜单,在搜索栏中输入 Chines ...

Vue2-Vue开发环境搭建

Vue2-Vue开发环境搭建相关推荐

最新文章

热门文章