可以说真正开始接触模块化前端开发是大三上学期, 当时为了快速搭建 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 teste2e test
这是我的填写方式
我的填写方式
现在, 我们已经成功的初始化了 vue 工程, 我们以后还会不断的通过 npm 往我们工程里添加新的依赖
来源: http://www.jianshu.com/p/84ddf5ad6b4f