使用vue-cli脚手架+webpack搭建vue项目

前言

突然觉得这句话说的很对，自从上次写完nodejs安装及npm全局模块路径的设置已经过去两月有余，而我的vue框架学习也就止步于此。还是没有给自己施加压力，浑浑噩噩的又度过了这么长时间，想想就很愧疚。(其实是懒癌患者)或许自己还是个少年吧，比较彷徨。

学习真的是自己的事，自己不想学，自制力不够，半点不由人。毕竟学无止境，而且技术的更新速度又非常快，应当时刻保持敬畏之心。当然也不是一件事没做，最近在看《JavaScript设计模式》(张容铭著)一书，收获颇多。对于JavaScript的面向对象有了更深的见解，对原型及原型链，以及对象的封装、继承、多态有了新的认识。但今天的重点不在于此，只是想通过写文章记录下自己在vue框架学习上的积累。

首先安装node.js并设置其环境变量

这里我就不多说了，毕竟上篇文章已经写的很清楚了。请戳：nodejs安装及npm全局模块路径的设置，安装设置完成后，为了验证安装是否正确，请window+r，输入cmd，快捷打开cmd控制台后，在命令行输入以下内容：

// 查看node安装是否正常
node -v 
// 回车后看到输出当前安装node的版本号，例如：v8.11.1，即安装正常

由于目前nodejs中已经集成了npm，所以我们在命令行输入以下内容，就可查看npm是否安装。

// 查看npm安装是否正常
npm -v 
// 回车后看到输出当前安装npm的版本号，例如：5.6.0，即安装正常

通过以上步聚，说明已经安装完nodejs并能正常运行。

其次安装vue、vue-cli脚手架和webpack打包工具

第一步已经安装完node及npm包管理工具，接下来就很好办了，直接在cmd命令行中输入：

1.安装vue

// 下载安装vue
npm install vue -g （-g表示安装全局模块的意思）

2.安装vue-cli

// 下载安装vue-cli脚手架
npm install vue-cli -g （-g表示安装全局模块的意思）

3.安装webpack

// 下载安装webpack打包工具
npm install webpack -g （-g表示安装全局模块的意思）

至此，以上三行命令表示将vue、vue-cli、webpack三个模块安装到了npm包管理工具设置后的全局路径中。

再次用vue-cli脚手架搭建vue项目

第二步将vue、vue-cli、webpack模块安装完成后，就可以使用以下命令创建vue项目了。

// vue init <template-name> [project-name]
vue init webpack vue-web

// 回车后有以下内容需要填写
Project name (vue-web)    // 项目名称
Project description (this is my first vue project)     // 项目描述（可以自行描述一段话）
Author (liwei)    // 项目作者
Vue build (standalone)    
Install vue-router? (Yes)    // 安装vue路由
Use ESLint to lint your code? (Yes)   
Pick an ESLint preset (none)
Set up unit tests (No)    // 单元测试
Setup e2e tests with Nightwatch? (No)    // 单元测试
Should we run `npm install` for you after the project has been created? (recommended) (npm)

cmd命令行填写完后直接回车就可以创建项目名称为vue-web的项目了。

最后检验vue项目是否创建成功

首先在cmd命令行中先进入到vue项目所在的路径下，然后输入：

// 安装package.json中的依赖
npm install 

// 运行项目
npm run dev
// 命令行显示无异常，然后可以在浏览器打开http:localhost:8080/#/查看结果

// 项目打包发布
npm run build（暂时不做过多介绍）

小结

通过以上步聚，就可以完成vue-cli配合webpack搭建vue项目的开发。当然，开发的过程中存在不少要填的坑，其实每走一步，都是很成功的。

共勉。