Vue+vue-cli+webpack前端开发工具入门
本文不讲述Vue的语法、函数等。只是讲述Vue开发前端使用的工具。预先善其事,必先利其器。工具都弄好了才能更好地开发。
1、Vue环境的安装
下载node.js。下载地址:http://nodejs.cn/download/
下载对应的系统、位数、版本号后安装。node.js中自带npm,不需要额外下载npm。
npm在下载速度相对慢,可以安装国内淘宝镜像
命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后下面npm可以换成cnpm
安装完后在window命令窗口(window+R -> cmd)坚持是否安装成功。
2、前端开发工具 --VSCode
下载地址:https://code.visualstudio.com/Download
安装后在界面上打开终端,这里的终端其实就是window 的命令窗口,同样可以测试node.js 和 npm 的版本号
3、Vue的工具
Vue的环境和开发工具都搭建好之后可以使用Vue-cli的脚手架、创建webpack项目管理Vue工程。
3.1、使用Vue-cli之前需要安装Vue的脚手架,采用npm安装,命令是:npm install vue-cli --save
3.2 脚手架安装好之后可以安装webpack,命令:npm install webpack (会下载最新版本的,版本有需求的在webpack后面加@版本号)
3.3、构建webpack工程
使用vue-cli创建webpack工程:命令vue init webpack project_name
创建成功会有这样显示
运行上面两个命令之后会出现下面这个画面就代表成功,就可以直接使用Vue和其他工具进行开发了。不需要去配置