Vue.js开发环境部署

什么是Vue.js？

vue.js是一个用来开发web界面的前端库，是一门框架技术

vue.js与jQuery的区别

jQuery提高了DOM操作的效率

Vue极大地解放了DOM操作（Vue全部把DOM操作给屏蔽了）

Vue的核心思想是：数据驱动视图

Vue.js开发者工具vue-devtools安装方法

可翻墙的情况下：

直接在Chrome浏览器的Chrome应用商店的扩展程序中搜索vue-devtools

不可翻墙的情况下：

可以添加谷歌访问助手

具体下载地址在百度网盘上：

链接：https://pan.baidu.com/s/1TzLjQYyBg8QngjZh9iVmog

提取码：roj3

安装好助手以后可以直接在chrome应用商店里面搜索vue-devtools添加扩展程序

也可在github下载

插件的github地址：

https://github.com/vuejs/vue-devtools

下载到本地

打开chrome浏览器的扩展程序->加载已解压的扩展程序->选择shells目录下的Chrome文件夹拖过去就能添加

注：在giuhub上下载的压缩包目录结构可能会错误，可能需要自行在chrome目录下新建build目录，然后把icons下的所有.png格式的图片copy到chrome目录下，而chrome下的src目录下所有.js文件copy到新建的build目录下

Vue.js安装方法

一、使用<script>标签引入

开发版本：vue.js

生产版本：vue.min.js

二、使用npm进行安装（大型项目推荐使用npm方法）

在cmd下切换到项目目录

输入以下命令

npm init -y（初始化）

npm install vue（安装）

开发环境搭建

初始化项目的环境搭建：

输入以下语句安装淘宝镜像

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

建议使用cnpm的淘宝镜像，最大的原因就是cnpm的下载速度较npm快n倍，而且稳定

输入cnpm -v可查看版本号

能够成功查看版本号即安装成功

依次运行以下语句

cnpm install -g vue-cli全局安装vue-cli

新建目录mkdir myProject

切换到该目录cd myProject

vue init webpack myVueProject //意思是初始化vue，使用的是webpack模板，使用webpack工具进行压缩和打包，myVueProject是该项目名称

cd myVueProject

npm install //下载所有的依赖

npm run dev启动dev服务器，监听的端口为8080

http://localhost:8080

在浏览器输入http://localhost:8080即可运行本机的dev