VUE教程（第一节）

前端技术火热，框架技术层出不穷，什么vue，react，angular，本人用的最习惯的还是vue，并不是其他的不好，个人习惯而已，对于中小型项目vue会特别适合，而且开发的数据驱动思维在其他的领域也是运用的广泛，比如小程序开发（mpvue了解一下，开发小程序的vue插件），小应用开发之类的，所以vue个人觉得是前端开发工程的标配。

这是第一节课程，先说说用vue-cli脚手架搭建vue项目吧，

运用vue-cli之前需要安装nodejs，因为需要使用里面的npm包管理工具，怎么安装nodejs呢？

——>点击进入“http://nodejs.cn/”

——>显示如下内容

node

这样很明白了吧？

——>需要查看你是否安装成功可以根据命令行工具来检查，如果是Windows系统点击"开始"之中的“运行”,然后输入“cmd”，按回车，进入命令行工具，分别输入“node -v”和“npm -v”，然后回车，可以看到对应的版本号，显示版本号说明安装成功

cmd

——>开始使用vue-cli搭建vue项目：

新建一个文件夹，取名叫什么随便你，只要你开心就可以啦

——>进入文件夹里面，然后在路径输入框里面输入“cmd”按回车（或者按住“shift”键，点击鼠标右键会出现弹出菜单，在弹出菜单中选择“在此处打开命令行窗口”选择就可以了哦）。

——>在命令行窗口输入“npm install vue”，安装vue

——>安装完毕后再输入“npm install -g vue-cli”，安装脚手架

——>安装完毕后开始构建项目，输入“vue init webpack my-vue”，后面这个“my-vue”是项目文件的名字，你可以随便写什么名字

——>已经开始搭建项目了，它会询问你项目名字、作者、项目描述、路由之类的问题，需要根据自己实际情况进行选择，如果不会选择的话，那就默认就可以了。

——>然后输入“cd my-vue”,进入项目

——>输入“npm install”按回车,安装依赖,等待安装完毕。

——>最后输入"npm run dev"，运行项目，浏览器会自动打开，你可以看到一个初始化的vue项目页面，到此为止就已经用脚手架搭建好了一个vue项目。

——>以下是自动打开的页面显示内容，是不是非常小清新

vue页面

注：1.有些人在安装node时候提示没成功，很多可能是没有设置环境变量，怎么设置自行查阅；

2.有些人运行“npm run dev”，页面并没有自动打开，只能自己输入“http://localhost:8080/”查看项目，你可以在文件夹里面找一个“config”文件夹，里面的index.js文件里面有个“autoOpenBrowser”参数：设置为true就可以啦。

这节教程就这样了哦，有什么问题可以给我留言，期待与你分享技术，共同提高。