可以说真正开始接触模块化前端开发是大三上学期，当时为了快速搭建Vue.js的开发环境直接clone了iview的GitHub上的现成开发环境。目前大三下学期了，利用开学的空余时间重新整理并自己搭建了vue.js+vue-router+vuex+iview+webpack的前端开发环境。
第一阶段：下载工具
下载node.js 和npm
既然是vue工程，所以自然离不开npm这个前端开发工具。npm是一个基于Javascript的软件注册表，可以通过它下载开源的Javascript包。不熟悉npm工具的同学可以点这里。
npm工具是和node.js一起下载的，官方下载地址可以点这里。下载并安装完以后可以在命令行内输入node --version和npm --version查看是否安装成功和当前版本号。
这是写这篇博客时候的最新版
这两个工具在前端开发中至关重要，不仅在vue工程中，在react工程、electron工程中都有可能用到。
下载vue-cli
有了npm工具我们就可以下载vue-cli这个工具。vue-cli是搭建vue工程的脚手架，我个人理解就是搭建vue工程的命令行软件。下载vue-cli工具只要在命令行输入
npm install -g vue-cli
通过输入vue --version可以查看是否安装成功和当前版本号。
这是写这篇博客时候的最新版
下载webpack
webpack是模块打包工具，它主要的功能就是将我们编写好的模块化程序打包成传统的html+css+js的文件以便浏览器能够运行。不熟悉的同学可以点击这里。下载webpack工具只要在命令行输入
npm install -g webpack
同样，我们也可以查看是否安装正确。
这是写这篇博客时候的最新版
Mac环境下安装不成功可能是权限没有给够，命令前加
sudo后输入密码可以解决。
现在我们就可以创建一个vue工程了。
第二阶段：利用vue-cli初始化vue工程
直接利用vue-cli以webpack为模板初始化工程
vue init webpack demo
执行完这段代码后它会要求你填一些关于项目的基本信息
它要求你填写一些信息
这里都是默认填写，但是有的项不建议勾选，比如说ESLint（它是用来检测JS书写规范的）、unit test、e2e test。
这是我的填写方式
我的填写方式
现在，我们已经成功的初始化了vue工程，我们以后还会不断的通过npm往我们工程里添加新的依赖。
网友评论