前端技术火热,框架技术层出不穷,什么vue,react,angular,本人用的最习惯的还是vue,并不是其他的不好,个人习惯而已,对于中小型项目vue会特别适合,而且开发的数据驱动思维在其他的领域也是运用的广泛,比如小程序开发(mpvue了解一下,开发小程序的vue插件),小应用开发之类的,所以vue个人觉得是前端开发工程的标配。
这是第一节课程,先说说用vue-cli脚手架搭建vue项目吧,
运用vue-cli之前需要安装nodejs,因为需要使用里面的npm包管理工具,怎么安装nodejs呢?
——>点击进入“http://nodejs.cn/”
——>显示如下内容
这样很明白了吧?
——>需要查看你是否安装成功可以根据命令行工具来检查,如果是Windows系统点击"开始"之中的“运行”,然后输入“cmd”,按回车,进入命令行工具,分别输入“node -v”和“npm -v”,然后回车,可以看到对应的版本号,显示版本号说明安装成功——>开始使用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项目。
——>以下是自动打开的页面显示内容,是不是非常小清新注:1.有些人在安装node时候提示没成功,很多可能是没有设置环境变量,怎么设置自行查阅;
2.有些人运行“npm run dev”,页面并没有自动打开,只能自己输入“http://localhost:8080/”查看项目,你可以在文件夹里面找一个“config”文件夹,里面的index.js文件里面有个“autoOpenBrowser”参数:设置为true就可以啦。
这节教程就这样了哦,有什么问题可以给我留言,期待与你分享技术,共同提高。